Tap选项卡案例分

屏幕截图 2023-11-08 135100.png

屏幕截图 2023-11-08 134624.png

先用html和css把盒子写好

html 和css

用<ul> <li>写盒子

下面的大盒子会盖住用display ：none

js部分

添加标签active使其显现其他默认隐藏

自定义属性后面再获取自身属性

用this到当前对象身上

oHeaderItems[m].classList.remove("active")//将所有的active拿掉

oHeaderItems[index].classList.add("active")//给想要的加上active

下面大盒子也一样

<script>
        var oHeaderItems = document.querySelectorAll(".header li")
        var oBoxItems = document.querySelectorAll(".box li")
        //queryselector元素选择器 

        for (var i = 0; i < oHeaderItems.length; i++) {
            oHeaderItems[i].dataset.index = i
            oHeaderItems[i].onclick = handler

        }
        function handler() {
            // console.log(this.dataset.index)
            var index=this.dataset.index
            for (var m = 0; m < oHeaderItems.length; m++) {
                oHeaderItems[m].classList.remove("active")//将所有的active拿掉
                oBoxItems[m].classList.remove("active")
            }

            oHeaderItems[index].classList.add("active")//给想要的加上active
            oBoxItems[index].classList.add("active")
        }
    </script>

解析代码

queryselector元素选择器

作用:可以结合多个选择器、伪类和属性选择器来进行更复杂的元素选择。可以使用它来查找并操作文档中的特定元素

这个意义 for循环对i自增

oHeaderItems[i].dataset.index = i设置当前 oHeaderItems 数组中第 i 个元素的 dataset.index 属性为当前的 i 值。dataset 是元素的属性对象，允许您访问自定义的 data-* 属性的值。在这里，设置了一个名为 index 的自定义属性。 目的点击该区域时层级增加显示在最上面

oHeaderItems[i].onclick = handler给当前 oHeaderItems 数组中第 i 个元素绑定一个 onclick 事件处理函数。这个函数名为 handler。

可以与css联动，移除active的隐藏，加上的显现

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: none;
        padding: none;
    }

    ul {
        list-style: none;
        margin-left: 400px;
    }

    .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: 40px;
        top: 0;
        width: 500px;
        height: 300px;
        background-color: yellow;
        display: none;
    }

    .header .active {
        background-color: red;
    }

    .box .active {
        display: block;
    }
</style>

<body>
    <ul class="header">
        <li class="active">英雄联盟</li>
        <li>DOTA</li>
        <li>风暴英雄</li>
        <li>300英雄</li>

    </ul>
    <ul class="box">
        <li class="active"><img src="./701d41c9e8f1441bd9cdf97d29c49a11.jpg" width="500px" height="300px"></li>
        <li><img src="./85735a688bae4a96d5d2cb58045c5f41.jpg" width="500px" height="300px"></li>
        <li><img src="./d7722fbac6668c733fd522833c757441.jpg" width="500px" height="300px"></li>
        <li><img src="./701d41c9e8f1441bd9cdf97d29c49a11.jpg" width="500px" height="300px"></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() {
            // console.log(this.dataset.index)
            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>

</html>

Tap选项卡案例分析

Tap选项卡案例分

html 和css

js部分