2020-12-10 JavaScript 选项卡实例

最新推荐文章于 2023-02-06 19:42:02 发布

Amanda&Rachel

最新推荐文章于 2023-02-06 19:42:02 发布

阅读量80

点赞数 1

分类专栏： JavaScript学习总结文章标签： js javascript 前端

本文链接：https://blog.csdn.net/m0_51907938/article/details/110959140

版权

JavaScript学习总结专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #ul{
            list-style: none;
            width: 300px;
            display: flex;
            justify-content: space-around;
        }
        #ul>li{
            width: 100%;
            text-align: center;
        }
        .active{
            background: red;

        }
        #box>div{
            display: none;
        }
       #box>.show{
            display: block;
        }

    </style>
</head>
<body>
    <ul id="ul">
        <li class="active">第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>

    <div id="box">
        <div class="show">111111111</div>
        <div>222222222</div>
        <div>333333333</div>
    </div>

    <script>
        var lis= document.querySelector("#ul").children;
        var box= document.querySelector("#box").children;
            lis=Array.from(lis);
            box=Array.from(box);

        for(let i=0;i<lis.length;i++){
            lis[i].onclick=function(){
                // console.log(i)
                for(let j=0;j<lis.length;j++){
                    lis[j].classList.remove("active");
                    box[j].classList.remove("show")
                }
                lis[i].classList.add("active");
                box[i].classList.add("show");


            }
        }
    </script>
</body>
</html>