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

时间：2021-09-02 10:08:33|栏目：JavaScript代码|点击：次

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>

上一篇：JS操作时间 - UNIX时间戳的简单介绍(必看篇)

栏目：JavaScript代码

下一篇：JS对象是否拥有某属性如何判断

本文标题：JavaScript栏目列表隐藏/显示简单实现

本文地址：http://www.codeinn.net/misctech/171977.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程