ES6——class类实现选项卡切换

html

<!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>简单的选项卡功能</title>
    <style>
        .tab .tab-content{
            display: none;
        }
        .tab .tab-content.active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="app">
        <div class="tab tab-wrapper">
            <div class="tab-btn">
                <button class="tab-btn-item">tab选项1</button>
                <button class="tab-btn-item">tab选项2</button>
                <button class="tab-btn-item">tab选项3</button>
                <button class="tab-btn-item">tab选项4</button>
                <button class="tab-btn-item">tab选项5</button>
            </div>
            <div class="tab-content">tab内容1</div>
            <div class="tab-content">tab内容2</div>
            <div class="tab-content">tab内容3</div>
            <div class="tab-content">tab内容4</div>
            <div class="tab-content">tab内容5</div>
        </div>
    </div>
    <script src="./js/tab.js"></script>
</body>
</html>


class Tab{
    constructor(wrapper) {
        this.tab = document.querySelector(wrapper);
        this.tabList = this.tab.querySelectorAll(".tab-btn-item");
        this.tabList = Array.from(this.tabList);
        this.cList = this.tab.querySelectorAll(".tab-content");
        this.addEventn();
        this.#tabClickHandler(this.tabList[0])
    };
    #tabClickHandler(target) {
        let item = null;
        let index = this.tabList.findIndex(val => {
            return Object.is(target, val);//target===val
        });
        if (index == -1) return false;
        for (let i = 0; i < this.cList.length; i++) {
            // item = this.cList[i];
            // item.classList.remove("active");
            this.cList[i].classList.remove("active");
        }
        this.cList[index].classList.add("active");
    }
    addEventn() {
        for (let i = 0; i < this.tabList.length; i++) {
            this.tabList[i].addEventListener("click",e=>this.#tabClickHandler(e.target) ,false);
            
        }
    };  
}

let t = new Tab(".tab-wrapper");