一个小程序——页面的隐藏与显示
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>js分栏模式</title>
6: </head>
7: <body>
8: <form action="" method="get" name="form1" >
9: <table width="300" border="1" id="table1" name="table" height="400px" >
10: <th id="lanmu" width="70">
11: <p><a href="#">栏目一</a></p>
12: <p><a href="#">栏目二</a></p>
13: <p><a href="#">栏目三</a></p>
14: <p><a href="#">栏目四</a></p>
15: </th>
16: <th id="xy" width="5"><img src="haha.jpg" width="11" height="37" onclick="javascript:hide()" /></th>
17: <th>这里是内容区域</th>
18: </table>
19: </form>
20: </body>
21: </html>
22: <script language="javascript" type="text/javascript">
23: //隐藏栏目
24: function hide()
25: {
26: //将id为lanmu的样式的display属性设置为none，即隐藏起来
27: document.getElementById("lanmu").style.display="none";
28: //将id为lanmu的html语句换为下面的这句,点击出发的事件为显示
29: document.getElementById("xy").innerHTML="<img src='haha2.jpg' onclick='javascript:xs()' />"
30: }
31: //显示栏目
32: function xs()
33: {
34: //讲id为lanmu的样式的display属性设为空，即显示出来
35: document.getElementById("lanmu").style.display="";
36: //将id为lanmu的样式的html语句更换回去,点击触发的事件为隐藏
37: document.getElementById("xy").innerHTML="<img src='haha.jpg' onclick='javascript:hide()' />;"
38: }
39: </script>
原始界面：
隐藏后界面：
还原后界面：
