选项卡（面向对象）-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_52291147/article/details/129961557
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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;
            height: 200px;
        }

        .box li {
            position: absolute;
            left: 0;
            top: 0;
            width: 500px;
            height: 200px;
            background-color: yellow;

            /* 隐藏元素并脱离文档 */
            display: none;
        }

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

        .box .active {
            /* 将行内元素转成块级元素,块级元素一般单独占一行 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="container1">
        <ul class="header">
            <li class="active">正在热映</li>
            <li>即将上映</li>
            <li>选择影院</li>
            <li>选择时间</li>
        </ul>
        <ul class="box">
            <li class="active">0-没有电影</li>
            <li>1-没有上映</li>
            <li>2-没有影院</li>
            <li>3-没有时间</li>
        </ul>
    </div>
    <div class="container2">
        <ul class="header">
            <li class="active">正在热映</li>
            <li>即将上映</li>
            <li>选择影院</li>
            <li>选择时间</li>
        </ul>
        <ul class="box">
            <li class="active">0-没有电影</li>
            <li>1-没有上映</li>
            <li>2-没有影院</li>
            <li>3-没有时间</li>
        </ul>
    </div>

    <script>
      
        function Tabs(select,type) {
            var container = document.querySelector(select)
            this.oHeaderItems = container.querySelectorAll(".header li")
            this.oBoxItems = container.querySelectorAll(".box li")

            // console.log(this.oHeaderItems, this.oBoxItems)
            this.type = type
            this.change()
        }

        Tabs.prototype.change = function () {
            for (let i = 0; i < this.oHeaderItems.length; i++) {

                this.oHeaderItems[i].addEventListener(this.type,()=>{
                    // this.oHeaderItems[i]中的this指向Tabs，与父的指向一样
                // 使用箭头函数，onclick函数中的this也指向Tabs，使用普通函数就指向了this.oHeaderItems[i]
                // this.oHeaderItems[i].onclick = () => {
                    // console.log("111")//确定是否绑上事件.
                    // 用let后每一次循环都能拿到i的值（i只存活在for这个块级作用域内）
                    // console.log(i)
                    console.log(this)

                    var index = i//拿到i值,不需要暂存自定义属性了

                    // 不管有没有active，把每一个选项卡上的active都清掉;
                    for (var j = 0; j < this.oHeaderItems.length; j++) {
                        this.oHeaderItems[j].classList.remove("active")
                        this.oBoxItems[j].classList.remove("active")
                    }

                    // 然后再在点击的那个选项卡上加active.
                    this.oHeaderItems[index].classList.add("active")
                    this.oBoxItems[index].classList.add("active")

                // }
                })
            }
        }

        // new Tabs(".container1")
        // new Tabs(".container2")
        var tab1 = new Tabs(".container1","click")
        // tab1.change()
        // 可以改变事件类型，传入type值，并不局限于click事件
        var tab2 = new Tabs(".container2","mouseover")
        // tab2.change()
    </script>
</body>

</html>
效果显示：