JavaScript栏目列表隐藏/显示简单实现


Posted in Javascript onApril 03, 2013

1.构建JavaScript库

(function(){ //将命名空间IC注册到window 
window['JSHide']={}; 
//隐藏侧边栏,并将图片换成右箭头图片 
function yc() 
{ 
document.getElementById("cloone").style.display ="none"; 
document.getElementById("img").innerHTML ="<img src='Image/右箭头.png' width='10' height='10' longdesc='Image/右箭头.png' onclick='JSHide.xs()' />"; 
} 
window['JSHide']['yc']=yc; 
//显示侧边栏,并将图片换成左箭头 
function xs() 
{ 
document.getElementById("cloone").style.display =""; 
document.getElementById("img").innerHTML ="<img src='Image/左箭头.png' width='10' height='10' longdesc='Image/左箭头.png' onclick='JSHide.yc()' />"; 
} 
window['JSHide']['xs']=xs; 
})();

2.将JS文件插入到HTML文件中
“插入”--“HTML”--"脚本对象"---“脚本”,选择好脚本文件后将其插入到HTML文件中。
3.HTML文件代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>javascript分栏模式</title> 
<script language="JavaScript" type="text/javascript" src="JS/JSHide.js"></script> 
</head> 
<body> 
<table width="425" height="198" border="1"> 
<tr> 
<td id="cloone" width="55" align="center" valign="middle" scope="row"> 
<p><a href="if测试.html" target="_blank">栏目一</a></p> 
<p><a href="for循环.html" target="_blank">栏目二</a></p> 
<p><a href="CSS初步变色消失出现.html" target="_blank">栏目三</a></p> 
<p><a href="1加到100.html" target="_blank">栏目四</a></p> 
<p><a href="JS初步.html" target="_blank">栏目五</a></p> 
</td> 
<td width="102" align="center" valign="middle"> 
<span id="img"> 
<img src="Image/左箭头.png" width="10" height="20" longdesc="Image/左箭头.png" onclick="JSHide.yc()"/> 
</span> 
</td> 
<td width="71" align="center" valign="middle">这里是内容区域</td> 
<td width="169" align="center" valign="middle"><input type="text" name="textfield" id="txtid" value="yesle" /></td> 
</tr> 
</table> 
</body> 
</html>
Javascript 相关文章推荐
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 Javascript
Node.js自定义实现文件路由功能
Sep 22 Javascript
深入理解React高阶组件
Sep 28 Javascript
JavaScript设计模式之代理模式简单实例教程
Jul 03 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
JS模板实现方法
Apr 03 #Javascript
JS实现标签页效果(配合css)
Apr 03 #Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 #Javascript
js去字符串前后空格5种实现方法及比较
Apr 03 #Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 #Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 #Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
Apr 02 #Javascript
You might like
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
ext实现完整的登录代码
2008/08/08 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
Europcar比利时:租车
2019/08/26 全球购物
自我推荐书
2013/12/04 职场文书
车贷收入证明范本
2014/01/09 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
小学校本培训方案
2014/06/06 职场文书
争先创优活动总结
2014/08/27 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
全陪导游词
2015/02/04 职场文书
主题班会开场白
2015/06/01 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js