逆袭班学习之JavaScript面向对象的选项卡

    .box{width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
    .box ul{margin: 0;padding: 0;list-style: none;height: 40px;line-height
    :40px;display: flex;background: #ccc;text-align: center;}
    .box li{flex:1;border-left: solid 1px black;border-right: solid 1px black;}
    .box li.active{background: rgb(63, 12``0, 226);}

    .cont{}
    .cont div{width: 500px;height: 360px;display: none;}
    .cont .cont1{background: rgb(17, 226, 97);display: block;}
    .cont .cont2{background: rgb(196, 167, 8);}
    .cont .cont3{background: rgb(16, 221, 228);}


<div class="box">
    <ul><li class="active">新闻</li><li>招聘</li><li>广告</li></ul>
    <div class="cont">
        <div class="cont1">第一个</div>
        <div class="cont2">第二个</div>
        <div class="cont3">第三个</div>
    </div>
</div>

function Tab(){

    this.li = document.querySelectorAll(".box li");
    this.cont = document.querySelectorAll(".cont div");
}


Tab.prototype.addEvent = function(){
    var that = this;
    for(let i=0;i<this.li.length;i++){
        this.li[i].onclick = function(){
            
            that.setActive(i);
        }
    }
}

Tab.prototype.setActive = function(iNow){
    for(var i=0;i<this.li.length;i++){
        this.li[i].className = "";
        this.cont[i].style.display = "none";
    }
    
    this.li[iNow].className = "active";
    this.cont[iNow].style.display = "block";
}

var t = new Tab();
t.addEvent();

执行结果