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

以下代码是我写的关于标签开关闭合效果的实例,很简单的,内容及含义我就不说了,仔细看看,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)