javascript学习实录之六（div开关闭合效果实例） --刘小小尘

来源：互联网发布：闪电抢购软件使用方法编辑：程序博客网时间：2024/05/01 14:00

以下代码是我写的关于标签开关闭合效果的实例，很简单的，内容及含义我就不说了，仔细看看，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)" onclick="list2()">好友列表</a><br/>                <div>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                </div>            </td>        </tr>        <tr>            <td>                <a href="javascript:void(0)" onclick="list2()">好友列表</a><br/>                <div>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                </div>            </td>        </tr>        <tr>            <td>                <a href="javascript:void(0)" onclick="list2()">好友列表</a><br/>                <div>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                    javascript学习实录 之五（节点操作）<br/>                </div>            </td>        </tr>    </table></body></html>

javascript学习实录 之六（div开关闭合效果实例） --刘小小尘

javascript学习实录之六（div开关闭合效果实例） --刘小小尘