面向對象的選項卡案例

<!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;
        }
        .box {
            width: 600px;
            height: 300px;
            border: 5px #000 solid;
            margin: 50px auto;
        }
        ul , ol , li {
            list-style: none;
        }
        .box > ul {
            width: 100%;
            height: 40px;
            overflow: hidden;
        }
        .box > ul > li {
            width: 200px;
            float: left;
            height: 100%;
            line-height: 40px;
            font-size: 30px;
            text-align: center;
            background: orange;
            cursor: pointer;
        }
        .box > ul > li.active {
            background-color: purple;
        }
        .box > ol {
            position: relative;
            width: 100%;
            height: 260px;
        }
        .box > ol > li {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            line-height: 260px;
            text-align: center;
            font-size: 100px;
            background-color: skyblue;
            display: none;
        }
        .box > ol > li.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    </div>

    <script>
        // 面向對象的選項卡

        // 1、抽象內容
        // + 屬性 btns
        // + 屬性 tabs
        // + 方法 能實現點擊事件切換的方法

        // 2、書寫構造函數
        // + 接受一個參數:范圍元素

        // 3、方法里面實現選項卡
        // + 
        function Tabs(ele) {
            // 拿到出現選項卡的范圍
            this.ele = document.querySelector(ele)
            // 找到btns
            this.btns = this.ele.querySelectorAll('ul>li')
            // 找到tabs
            this.tabs = this.ele.querySelectorAll('ol>li')
            console.log(this.tabs);

            Tabs.prototype.change = function() {
                // 這個位置的this是當前實例
                var that = this;

                // 操作的是當前實例的btns tabs
                // this 就是當前實例，我們就要給this.btns的每一個添加點擊事件
                this.btns.forEach(function (item,index) {
                    item.addEventListener('click',function(){
                        // this：你所點擊的這個li
                        // that：實例對象
                        // console.log(that);
                        that.btns.forEach(function(t, i){
                            that.btns[i].className = '';
                            that.tabs[i].className = '';
                        })
                        // 給對應的添加類名
                        item.className = 'active';
                        that.tabs[index].className = 'active';
                    })
                });
            }
        }

        let t1 = new Tabs('.box');
        t1.change()
    </script>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容