编程 Javascript

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 相关文章推荐

JavaScript 事件对象的实现

Jul 13 Javascript

jquery 多级下拉菜单核心代码

May 21 Javascript

JQuery设置和去除disabled属性的5种方法总结

May 16 Javascript

jQuery(js)获取文字宽度(显示长度)示例代码

Dec 31 Javascript

JS动态日期时间的获取方法

Sep 28 Javascript

javascript prototype原型详解(比较基础)

Dec 26 Javascript

微信小程序getPhoneNumber获取用户手机号

Sep 29 Javascript

详解HTML5 使用video标签实现选择摄像头功能

Oct 25 Javascript

详解vue2.0 不同屏幕适配及px与rem转换问题

Feb 23 Javascript

在vue中使用echarts图表实例代码详解

Oct 22 Javascript

vue-cli3 取消eslint校验代码的解决办法

Jan 16 Javascript

JavaScript装饰者模式原理与用法实例详解

Mar 09 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特殊符号&处理(2种方法)

Apr 02 #Javascript