.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();
执行结果