JSqq列表菜单展示

最新推荐文章于 2023-04-05 12:58:51 发布

刘栀子

最新推荐文章于 2023-04-05 12:58:51 发布

阅读量415

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/LZhizi/article/details/89448427

版权

js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

实现效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ菜单列表展示</title>
</head>
<style>
    ul,h2{
        padding: 0;
        margin:0;
    }
    li{
        list-style: none;
    }
    div{
        margin:0 auto;
        width: 300px;
        border:1px solid pink;
    }
    .list li{
        text-indent: 20px;
        border:1px solid #ccc;
        height: 30px;
    }
    .active{
        display: none;
    }
    .color{
        background-color: pink;
    }
</style>
<script type="text/javascript">
    window.function(){
        var List=document.getElementById('listBox');
        // 标题
        var oH=List.getElementsByTagName('h2');
        var oUl=List.getElementsByTagName('ul');
        // li列表
        var oLi=List.getElementsByTagName('li');
        for(var i=0;i<oUl.length;i++){
            oH[i].index=i;
            oH[i].function(){
                if(oUl[this.index].className == ''){
                    oUl[this.index].className='active';
                }else{
                    oUl[this.index].className='';
                }

            };
        }
        for (let i = 0; i<oLi.length; i++){
            oLi[i].onclick = function () {
                for (let j=0; j<oLi.length; j++){
                    oLi[j].className='';
                     console.log(oLi[j]);
                }
                this.className='color';
            }
        }
    }
</script>
<body>
<div>
    <div id="listBox">
        <div class="list">
            <h2>我的好友</h2>
            <ul>
                <li>张三</li>
                <li>张三</li>
                <li>张三</li>
                <li>张三</li>
                <li>张三</li>
                <li>张三</li>
            </ul>
        </div>
        <div class="list">
            <h2>企业好友</h2>
            <ul >
                <li>里斯</li>
                <li>里斯</li>
                <li>里斯</li>
                <li>里斯</li>
            </ul>
        </div>
        <div class="list">
            <h2>黑名单</h2>
            <ul>
                <li>王五</li>
                <li>王五</li>
                <li>王五</li>
                <li>王五</li>
            </ul>
        </div>
    </div>
</div>
</body>
<html>

刘栀子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSqq列表菜单展示

实现效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>QQ菜单列表展示</title></head><style> ul,h2{ padding: 0; ...
复制链接

扫一扫