以下代码是我写的关于标签开关闭合效果的实例,很简单的,内容及含义我就不说了,仔细看看,so easy
- <!DOCTYPE html>
- <html>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <head>
- <title></title>
- <script type="text/javascript">
- function list2() {
- var aNode = event.srcElement;
- var tdNode = aNode.parentNode;
- var divNode = tdNode.getElementsByTagName("div")[0];
- var tabNode = document.getElementsByTagName("table")[0];
- var divNodes = tabNode.getElementsByTagName("div");
- for (var x=0;x<divNodes.length;x++) {
- if(divNodes[x] == divNode) {
- openClose(divNodes[x])
- } else {
- divNodes[x].className = "close";
- }
- }
- }
- function openClose(divNode) {
- if(divNode.className == "open") {
- divNode.className = "close";
- } else {
- divNode.className = "open";
- }
- }
- </script>
- <style type="text/css">
- table {
- border: cadetblue 1px solid;
- }
- table td {
- border: #0000FF 1px solid;
- background-color: #00CCFF;
- }
- table td div {
- background-color: #66FFCC;
- display: none;
- }
- table td a:link, table td a:visited {
- text-decoration: none;
- color: #993300;
- }
- .open {
- display: block;
- }
- .close {
- display: none;
- }
- </style>
- </head>
- <body>
- <table>
- <tr>
- <td>
- <a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
- <div>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- </div>
- </td>
- </tr>
- <tr>
- <td>
- <a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
- <div>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- </div>
- </td>
- </tr>
- <tr>
- <td>
- <a href="javascript:void(0)" οnclick="list2()">好友列表</a><br/>
- <div>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- javascript学习实录 之五(节点操作)<br/>
- </div>
- </td>
- </tr>
- </table>
- </body>
- </html>