console
var that;
class tab{
constructor(id){
that=this;
this.main=document.querySelector(id);
this.lis=this.main.querySelectorAll("li");
this.sections=this.main.querySelectorAll("section");
this.add=this.main.querySelector('.tabadd');
this.ul=this.main.querySelector('ul');
this.bot=this.main.querySelector('#bottom');
this.init();
}
init(){
this.updateNode();
for(var i=0;i<this.lis.length;i++){
this.lis[i].index=i;
this.lis[i].onclick=this.toggletab;
}
this.add.onclick=this.addtab;
}
updateNode(){
this.lis=this.main.querySelectorAll("li");
this.sections=this.main.querySelectorAll("section");
}
toggletab(){
that.clearClass();
this.className='now';
that.sections[this.index].className='consctive';
}
clearClass(){
for(var i=0;i<this.lis.length;i++){
this.lis[i].className='';
this.sections[i].className='';
}
}
addtab(){
var li='<li class="now"><span>新测试</span></li>';
that.ul.insertAdjacentHTML('beforeend',li);
var section1='<section>新测试</section>';
that.bot.insertAdjacentHTML('beforeend',section1);
that.init();
}
removetab(){}
edittab(){}
}
new tab('.all')
<div class="all">
<div id="tab">
<ul>
<li class="now"><span>测试1</span></li>
<li><span>测试1</span></li>
<li><span>测试1</span></li>
</ul>
<div class="tabadd">
<span>+</span>
</div>
</div>
<div id="bottom">
<section class="consctive">测试1a</section>
<section>ce2</section>
<section>ce3</section>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.all{
width: 500px;
height: 400px;
border: 1px solid #000;
}
#tab{
width: 100%;
height: 100px;
border: 1px solid #000;
}
ul{
width: 80%;
height: 100%;
float: left;
}
li{
display: block;
list-style: none;
float: left;
height: 100%;
width: 50px;
border: 1px solid #000;
}
.now{
}
.tabadd{
width: 50px;
height: 50px;
float: right;
border: 1px solid;
}
#bottom{
height: 300px;
width: 100px;
}
#bottom>section{
display: none;
}
#bottom>.consctive{
height: 200px;
width: 100%;
border: 1px solid;
display: block;
}