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 相关文章推荐
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
一文了解Vue中的nextTick
May 06 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
openlayers4实现点动态扩散
Aug 17 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP 简单日历实现代码
2009/10/28 PHP
深入PHP数据加密详解
2013/06/18 PHP
解析php多线程下载远程多个文件
2013/06/25 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php通过strpos查找字符串出现位置的方法
2015/03/17 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
layer 刷新某个页面的实现方法
2019/09/05 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
用python处理MS Word的实例讲解
2018/05/08 Python
python实现周期方波信号频谱图
2018/07/21 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
如何在Django项目中引入静态文件
2019/07/26 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
幼儿园家长会邀请函
2014/01/15 职场文书
店面销售职位的职责
2014/03/09 职场文书
铁人观后感
2015/06/16 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python