点击隐藏页面左栏或右栏实现js代码


Posted in Javascript onApril 01, 2013

点击隐藏页面左栏或右栏(同一TABLE中)

<style type="text/css"> 
<!-- 
.navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} 
.STYLE1 {FONT-FAMILY: Webdings; FONT-SIZE: 9pt; cursor: hand;} 
--> 
</style> 
<script> 
function switchSysBar(){ 
if (switchPoint.innerText==3){ 
switchPoint.innerText=4 
document.all("frmTitle").style.display="none" 
}else{ 
switchPoint.innerText=3 
document.all("frmTitle").style.display="" 
}} 
</script> 
<table border="0" cellPadding="0" cellSpacing="0" height="100%" width="100%"> 
<tr> 
<td width="20%" align="middle" vAlign="center" noWrap bgcolor="#CC99FF" id="frmTitle" name="frmTitle"> </td> 
<td class=a2 style="WIDTH: 9pt"><table border="0" cellPadding="0" cellSpacing="0" height="100%"> 
<tr> 
<td style="HEIGHT: 100%" onClick="switchSysBar()"><font style="FONT-SIZE: 9pt; CURSOR: default; COLOR: #ffffff"> <br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<font color="#FF0000"><br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<span class="STYLE1" id="switchPoint" title="关闭/打开左栏">3</span><br/> 
<br/> 
<br/> 
<br/> 
<br/> 
<br/> 
</font><br/> 
<br/> 
屏幕切换 </font></td> 
</tr> 
</table></td> 
<td bgcolor="#FFCC99" style="WIDTH: 100%"> </td> 
</tr> 
</table> 
想把隐藏左右栏的那个按钮按成图片,改一下JS,IMG增加ID,这里id=aa,也可以换成其它的名称,参考如下: 
<script> 
function switchSysBar(){ 
if (document.all.aa.src.indexOf("bl_1")!=-1){ 
aa.src="images/al_1.gif" 
document.all("frmTitle").style.display="none" 
}else{ 
aa.src="images/bl_1.gif" 
document.all("frmTitle").style.display="" 
} 
} 
</script> 
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="770" valign="top"> </td> 
<td width="10" onClick="switchSysBar()"><img id="aa" src="images/bl_1.gif" title="关闭/打开功能导航"></td> 
<td width="191" valign="top" id="frmTitle" name="frmTitle"> </td> 
</tr> 
</table>
Javascript 相关文章推荐
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
angular中的cookie读写方法
Aug 02 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
jquery如何把参数列严格转换成数组实现思路
Apr 01 #Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 #Javascript
select标记美化--JS式插件、后期加载
Apr 01 #Javascript
js关闭父窗口时关闭子窗口
Apr 01 #Javascript
基于jQuery实现模拟页面加载进度条
Apr 01 #Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 #Javascript
JavaScript中的onerror事件概述及使用
Apr 01 #Javascript
You might like
php传值赋值和传地址赋值用法实例分析
2015/06/20 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
jquery animate 动画效果使用说明
2009/11/04 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
2016/03/11 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
python对json的相关操作实例详解
2017/01/04 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python笔记之facade模式
2019/11/20 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
JAVA代码查错题
2014/10/10 面试题
C++的几个面试题附答案
2016/08/03 面试题
商场父亲节活动方案
2014/08/27 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
普通党员整改措施
2014/10/24 职场文书
出国留学英文自荐信
2015/03/25 职场文书
美丽心灵观后感
2015/06/01 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android