【选项卡案例】(html,css,javascript)

最新推荐文章于 2024-08-12 16:19:20 发布

王猫粮

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量72

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_70684059/article/details/129765993

版权

<style>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
.header{
    display: flex;
    width: 500px;
}
.header li{
    flex:1;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid black;
}
.box{
    position: relative;
}
.box li{
    position: absolute;
    left: 0;
    top: 0;
    width: 500px;
    height: 200px;
    background-color: yellow;
    display: none;
    font-size: 50px;
    line-height: 200px;
    text-align: center;
}
.header .active{
    background-color: red;
}
.box .active{
    display: block;
}
</style>
<body>
    <ul class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <!-- 可以多增加li ，可扩展性强-->
    </ul>
    <ul class="box">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <!-- 可以多增加li ，可扩展性强-->
    </ul>
    <script>
        var oHeaderItems=document.querySelectorAll(".header li")
        var oBoxItems=document.querySelectorAll(".box li")
        for(var i=0;i<oHeaderItems.length;i++){
            //自定义属性
            oHeaderItems[i].dataset.index=i
            oHeaderItems[i].onclick=handler
        }
            function handler(){
                var index=this.dataset.index
            for(var m=0;m<oHeaderItems.length;m++){
                oHeaderItems[m].classList.remove("active")
                oBoxItems[m].classList.remove("active")
            }
            oHeaderItems[index].classList.add("active")
            oBoxItems[index].classList.add("active")
            
            }
       
    </script>
</body>