简单版面向对象案例：选项卡

1. 抽象内容

一个能够完成选项卡的对象，需要有哪些属性和方法。

属性：所有可以点击的按钮盒子；

属性：所有可以切换的选项盒子；

方法：能添加点击事件的方法。

2. 书写构造函数

能创建一个对象，包含两个属性和一个方法；

属性直接写在构造函数体内；

方法写在构造函数的原型上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>面向对象选项卡</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul, ol, li {
            list-style: none;
        }

        .tab {
            width: 600px;
            height: 400px;
            border: 3px solid #373737;
            margin: 50px auto;
            display: flex;
            flex-direction: column;
        }

        ul {
            height: 60px;
            display: flex;
        }

        ul > li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40px;
            color: #545bb6;
            background-color: #b5bce6;
            cursor: pointer;
        }

        ul > li.active {
            background-color: #7267b6;
        }

        ol {
            flex: 1;
            position: relative;
        }

        ol > li {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            font-size: 100px;
            color: #373737;
            background-color: #e4e2ff;
            display: none;
            justify-content: center;
            align-items: center;
        }

        ol > li.active {
            display: flex;
        }
    </style>
</head>
<body>

    <div class="tab" id="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>

    <div class="tab" id="box2">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>

    <script>
        function Tabs(ele) {
            //范围
            this.ele = document.querySelector(ele)
            //在范围内找到所有可以点击的盒子
            this.btns = this.ele.querySelectorAll('ul > li')
            //范围内找到所有需要切换显示的盒子
            this.tabs = this.ele.querySelectorAll('ol > li')
        }

        //原型上书写方法
        Tabs.prototype.change = function () {
            //执行给所有btns 里面的按钮添加点击事件 (不能直接使用 t 这个变量,使用this)

            //提前保存this
            var _this = this

            for (var i = 0; i < this.btns.length; i++){
                //提前保存索引
                this.btns[i].setAttribute('index', i)

                this.btns[i].addEventListener('click', function () {
                    //需要让实例的btn 里面的每一个没有active 类名，让实例的 tabs 里面的每一个没有active 类名
                    //这里不是在change 函数的作用域了，而是事件处理函数的作用域，在事件处理函数里面，this 指向当前时间的时间源
                    //当你访问 this 的时候，其实是在访问变量，自己作用域没有，就会去上一级作用域查找
                    for (var j = 0; j < _this.btns.length; j++) {
                        _this.btns[j].className = ''
                        _this.tabs[j].className = ''
                    }

                    //当前点击的这个li 有active 类名
                    this.className = 'active'
                    //让实例身上的tabs里面索引对应的哪一个 li 有 active 类名
                    //拿到当前 li 身上保存的索引
                    var index = this.getAttribute('index') - 0
                    _this.tabs[index].className = 'active'
                })
            }
        }

        //选项卡就可以使用了
        var t = new Tabs('#box')
        //实例对象在调用方法，函数调用方式：对象.函数名()
        //函数内部的this就是指向 点 前面的xxx，change 函数里面写的this 就是 t
        t.change()
        // console.log(t)

        //实现第二个选项卡
        var t2 = new Tabs('#box2')
        t2.change()

    </script>
</body>
</html>

 效果图：

 

文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?share_source=copy_web