JavaScript实现Tab栏切换功能详解

<h4>
     Js 面向对象 动态添加标签页
</h4>
<div class="tabsbox" id="tab">
      <!-- tab 标签 -->
      <nav class="fisrstnav">
           <ul>
               <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
               <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
               <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
           </ul>
           <div class="tabadd">
               <span>+</span>
           </div>
       </nav>
       <!-- tab 内容 -->
       <div class="tabscon">
           <section class="conactive">测试1</section>
           <section>测试2</section>
           <section>测试3</section>
       </div>
</div>

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.init();//自动调用init
    }
    init(){
        //init初始化操作让相关元素绑定事件
        for(let i = 0;i<this.lis.length;i++){
            this.lis[i].setAttribute('index',i);//设置索引值
            this.lis[i].onclick = this.toggleTab;
        }
    }
    toggleTab() {
        //clearClass函数是类的公共函数，所有只能通过that调用
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.getAttribute('index')].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
}
var newtab = new tab('.tabsbox');

this.add = this.main.querySelector('.tabadd');
this.ul = this.main.querySelector('.fisrstnav ul');
this.fsection = this.main.querySelector('.tabscon');

this.add.onclick = this.addTab;

addTab() {
    that.clearClass();
    var random = Math.random();
    var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">测试'+ random +'</section>';
    that.ul.insertAdjacentHTML('beforeend',li);
    that.fsection.insertAdjacentHTML('beforeend',section);
}

updateNode() {
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
}

this.updateNode();

that.init();

this.remove = this.main.querySelectorAll('.icon-guanbi');

this.remove[i].onclick = this.removeTab;

removeTab(e) {
    e.stopPropagation();//阻止冒泡 防止触发他的父亲li的切换点击事件
    var index = this.parentNode.getAttribute('index');
    that.lis[index].remove();
    that.fsection[index].remove();
    that.init();
}

index--;
that.lis[index] && that.lis[index].click();

if(document.querySelector('.liactive')) return;