JS面向对象创建tab切换栏

JS面向对象创建tab切换栏

添加增加、删除、切换、修改的方法

点击加号新增tab栏和内容框，点击叉号删除对应的tab栏，点击选中的tab栏样式变化，双击tab栏、内容框文字可修改内容。
创建inti方法，绑定事件写在inti方法里面。
增加一个新的tab栏会增加相关的元素，新增加的元素没有获取到设置的方法。创建 updatenode方法，init调用updatenode方法，初始化后重新获取元素 保证元素可以及时更新 先获取元素再绑定事件。

 constructor(id) {
        that = this;
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');
        this.ul = this.main.querySelector('.fisrstnav ul:first-child');
        this.fsection = this.main.querySelector('.tabscon')
        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.spans[i].ondblclick = this.editTab;

            }

        }
        // 添加的新的元素都需要重新获取 都写在init里面
    updatenode() {
            this.lis = this.main.querySelectorAll('li');
            this.sections = this.main.querySelectorAll('section');
            this.remove = this.main.querySelectorAll('.icon-guanbi');
            this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');

        }

增加

 addTab() {
        //新加的li添加类 其余的li清除类
        that.clearName()
        var random = Math.random();

        var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>';
        that.ul.insertAdjacentHTML('beforeend', li);
        var section = '<section class="conactive">测试' + random + '</section>'; //random要加引号
        that.fsection.insertAdjacentHTML('beforeend', section);
        that.init(); //调用init() 重新获取元素个数

    }

切换

toggleTab() {
            that.clearName();

            this.className = 'liactive';
            that.sections[this.index].className = 'conactive';
        }
        //排他思想 清除所有的类名
    clearName() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            that.sections[i].className = '';
        }
    }

删除

removeTab(e) {
        e.stopPropagation(); //阻止冒泡 如果不加remove的点击事件完成后会触发li的点击事件
        var index = this.parentNode.index;
        //remove方法可以直接删除元素
        that.lis[index].remove();
        that.init(); //调用init() 重新获取元素个数
        if (document.querySelector('.liactive')) return; //如果有选中的li 删除现在选的li 
        // 之前选中的li不变 选中的li正好是现在要删除的li 删掉之后就没有选中的了 程序继续往下执行
        index--;
        this.lis[index] && this.lis[index].click(); //手动调用点击事件 如果只是该类名section的内容不会变
        //前面为真才会执行后面 如果index < 0 这个li不存在 前面为false不执行后面
    }

编辑

editTab() {
        //  this的指向是span
        var str = this.innerHTML;
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '<input type="text" />';
        var input = this.children[0];
        input.value = str;


    }