js class类 实现选项卡切换颜色

css代码

     * {
            margin: 0;
            padding: 0;
        }

        .container {
            margin: 100px auto;
            width: 500px;
        }

        .container ul {
            width: 500px;
            list-style: none;
            overflow: hidden;
        }

        .container ul li {
            float: left;
            width: 166px;
            padding: 10px 20px;
            border: 1px solid #000;
            box-sizing: border-box;
            background-color: rgb(229, 147, 160);
            text-align: center;
        }

        .container div {
            width: 496px;
            height: 200px;
            border: 1px solid #000;
            border-top: none;
            text-align: center;
        }

        .container .my {
            background-color: blueviolet;
        }

html代码

    <div class="container">
        <ul>
            <li>选项1</li>
            <li>选项2</li>
            <li>选项3</li>
        </ul>
        <div class="text"></div>
    </div>

js代码

    class Tab {
            constructor() { //构造
                this.rootEle = document.querySelector('.container')
                this.liEle = this.rootEle.querySelectorAll('li')
                this.box = this.rootEle.querySelector('.text')
            }
            onTab() {
                let _this = this
                for (let i = 0; i < this.liEle.length; i++) {
                    this.liEle[i].onclick = function(){ // 绑定事件
                        //清除样式
                        _this.onclear()
                        //添加类名
                        this.classList.add('my')
                    }
                }
            }
            onclear() {
                 //循环遍历给所有的li清除样式（初始化样式）
                for (let i = 0; i < this.liEle.length; i++) {
                    this.liEle[i].classList.remove('my')
                }
            }
        }

        let tab1 = new Tab() //创建实例对象
        tab1.onTab() // 调用对象方法  (点击效果的方法)