面向对象的选项卡案例

作者: 圆滚滚大煤球 | 来源:发表于2021-12-22 11:03 被阅读0次

面向对象三
面向对象的选项卡案例
17 - Tab选项卡-面向对象
0723
python 面向对象封装案例 II
面向对象上
python 面向对象封装案例
14.Python对象封装
Python面向对象设计
10-Python对象

<!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>