JS选项卡

最新推荐文章于 2024-07-28 20:27:10 发布

冥王星qqq

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量30

点赞数

文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/mingwangxingqqq/article/details/134476352

版权

本文详细介绍了如何通过JavaScript在HTML和CSS基础上创建一个下拉菜单式的选项卡切换效果，涉及事件监听和DOM操作，展示了如何控制元素的显示和隐藏以及激活状态的切换。

摘要由CSDN通过智能技术生成

HTML内容：

<ul class="header">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <ul class="box">
        <li class="active">111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

CSS内容：

*{
            padding: 0;
            margin: 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;
        }
        .box{
            position: relative;
        }
        .box li{
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 200px;
            background-color: yellow;
            display: none;
        }
        .header .active{
            background: red;
        }
        .box .active{
            display: block;
        }
        ul li{
            transition: all 0.6s;
        }

JS代码：

<script>
        var oheader=document.querySelectorAll(".header li")
        var obox=document.querySelectorAll(".box li")

        for(var i=0;i<oheader.length;i++){
            oheader[i].dataset.index=i
            oheader[i].onclick=handler
        }
        function handler(){
            var index=this.dataset.index
            for(var m=0;m<oheader.length;m++){
                oheader[m].classList.remove("active")
                obox[m].classList.remove("active")//全部移除“active”标签
            }
            oheader[index].classList.add("active")
            obox[index].classList.add("active")//为“index”添加“active”标签
        }
    </script>

在以上示例中，通过定义 handler 函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。