点击隐藏页面左栏或右栏实现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 相关文章推荐
常用js脚本
Dec 03 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
JS原型对象的创建方法详解
Jun 16 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
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
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
jquery.ajax之beforeSend方法使用介绍
2014/12/08 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
python中加背景音乐如何操作
2020/07/19 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
怎样创建、运行java程序
2014/08/01 面试题
《小儿垂钓》教学反思
2014/02/23 职场文书
人力资源职位说明书
2014/07/29 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
教师个人师德总结
2015/02/06 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书