js源码面向对象tab栏切换

js源码面向对象tab栏切换

var that;
class Tab {
constructor(id){
that = this;
//获取元素
this.main = document.querySelector(id);
this.fasection = this.main.querySelector(’.fasection’);
//获取添加按钮
this.add = this.main.querySelector(’.tabadd’);
//获取ul 即li的父元素
this.ul = this.main.querySelector(’.fisrstnav ul:first-child’);
this.init();
}
init(){
this.updateNode();
//初始化操作绑定事件
this.add.onclick = this.addTab;
for(var i =0;i<this.lis.length;i++){
this.lis[i].index = i;
this.lis[i].onclick = this.toggleTab;
this.remove[i].onclick = this.removeTab;
this.span[i].dblclick = this.editTab;
this.sections[i].dblclick = this.editTab;
}
}
//获取所有的li 和section
updateNode(){
this.lis = this.main.querySelectorAll(‘li’);
this