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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
js 函数调用模式小结
Dec 26 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
JS工厂模式开发实践案例分析
Oct 17 Javascript
浅谈JavaScript中this的指向更改
Jul 28 Javascript
全面解析Vue中的$nextTick
Dec 24 Vue.js
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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
MYSQL环境变量设置方法
2007/01/15 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
[51:11]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS DT
2014/05/22 DOTA
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
小学敬老月活动方案
2014/02/11 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
对标管理实施方案
2014/03/12 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
一帮一活动总结
2014/05/08 职场文书
课程设计感想范文
2015/08/11 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript