js实现qq好友分组

最新推荐文章于 2024-12-12 11:43:55 发布

大可&不必

最新推荐文章于 2024-12-12 11:43:55 发布

阅读量1.6k

点赞数 2

文章标签： js实现qq好友分组

本文链接：https://blog.csdn.net/style201904/article/details/90111738

版权

qq好友分组

 <style>
        ul,
        h2 {
            padding: 0;
            margin: 0;
            background-color: wheat;
        }

        li {
            list-style: none;

        }

        #list {
            width: 240px;
            margin: 0 auto;
        }

       

        #list h2 {
            height: 30px;
            line-height: 30px;
            text-indent: 20px;
            background: url('img/ico1.gif') no-repeat 5px center;
            cursor: pointer;
           
        }

        #list .active {
            background: url('img/ico2.gif') no-repeat 5px center;
        }

        #list ul {
            display: none;
        }

        #list ul li {
            line-height: 24px;
            text-indent: 24px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li class="lis">
            <h2>朋友</h2>
            <ul>
                <li>张珊珊</li>
                <li>张珊珊</li>
                <li>张珊珊</li>
            </ul>
        </li>
        <li class="lis">
            <h2>家人</h2>
            <ul>
                <li>欧阳州里</li>
                <li>欧阳州里</li>
                <li>欧阳州里</li>

            </ul>
        </li>
        <li class="lis">
            <h2>陌生人</h2>
            <ul>
                <li>张珊珊</li>
                <li>张珊珊</li>
                <li>张珊珊</li>

            </ul>
        </li>
    </ul>
</body>
<script type="text/javascript">
    window.onload = function () {
        var list = document.getElementById('list');
        var h2 = list.getElementsByTagName('h2');
        var ul = list.getElementsByTagName('ul');
       
        for (var i = 0; i < h2.length; i++) {
            h2[i].index = i;
            h2[i].onclick = function () {
                if (this.className == '') {
                    
                    ul[this.index].style.display = 'block';
                    this.className = 'active';
                } else {
                    ul[this.index].style.display = 'none';
                    this.className = '';
                }
            }
        }
    }




</script>

效果图
在这里插入图片描述