Js面向对象动态添加标签页

可以实现的功能：

可以实现tab栏的动态切换、添加、删除、编辑。

效果图：

完整代码如下：

index.html

class Tab {
    constructor(id){
        // 获取元素
        this.main = document.querySelector(id);
        this.section = this.main.querySelector('.tabscon')
        this.add = this.main.querySelector('.tabadd')
        // li的父元素
        this.ul = this.main.querySelector('.firstnav ul:first-child')
        this.init();
    }
    init() {
        // init 初始化操作让相关的元素绑定事件
        this.updateNode();
        this.add.onclick = this.addTab.bind(this.add, this); // 这里的把constructor里面的this作为一个实参传递给addTab函数
        for ( var i = 0; i < this.lis.length; i++) {
        this.lis[i].index = i;
        this.lis[i].onclick = this.toggleTab.bind(this.lis[i], this);
        // 需要阻止父元素的冒泡行为
        this.remove[i].onclick = this.removeTab.bind(this.remove[i], this);
        // 双击事件是 ondblclick
        this.spans[i].ondblclick = this.editTab;
        this.sections[i].ondblclick = this.editTab;
        }
    }
    // 因为动态获添加元素 需要重新获取元素  获取所有的小li 和section 和 remove
    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('.firstnav li span:first-child')
    }
    // 1、切换功能
    toggleTab(that) {
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for( var i = 0; i < this.lis.length; i++) {
           this.lis[i].className = '';
           this.sections[i].className = '';
        }
    }
    // 2、添加功能
    addTab(that) { // 这里的that是形参实际上接收的是constructor里面的this
        that.clearClass();
         // 1、创建li元素和section元素
         var li = '<li class="liactive"><span>新建选项</span><span class="iconfont icon-guanbi">×</span></li>'
         var section ='<section class="conactive">请输入你要编辑的内容......</section>'
         if(that.lis.length <= 7){
         // 2、把这两个元素追加到对应的父元素里面
         that.ul.insertAdjacentHTML('beforeend', li);
         that.section.insertAdjacentHTML('beforeend',section);
         }else{
            return alert('选项数已达上限，无法添加！！！')
         }
         that.init();
    }
    // 3、删除功能
    removeTab(that, e) {
        e.stopPropagation();  // 阻止冒泡 防止触发父元素li 的切换点击事件
        // 拿到父亲的索引号
        var index = this.parentNode.index;
        // 根据索引号删除对应的li和section remove()方法可以直接删除指定的元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        // 当我们删除了一个元素后 需要让当前元素处于选定状态
        //当我们删除的不是原来选中状态的li时 原来选中状态应该保持不变才行 需要设置一个函数来判断删除的tab是不是处于选中状态
        // 手动调用我们的点击事件 不需要手动触发
        if(document.querySelector('.liactive')) return;
        index--;
        that.lis[index] && that.lis[index].click();
    }
    // 4、修改功能
    editTab() {
        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;
        input.select(); // 让文本框里面的文字处于选定状态
        // 当我们离开文本框 就把文本框里的值给span
        input.onblur = function(){
            // 此时this指向input
            this.parentNode.innerHTML = this.value
        };
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e){
           if( e.key === 'Enter'){
               // enter键值为13
               this.blur();
           }
        };
    }
}

new Tab('#tab');

tab.css

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

main {
    width: 960px;
    height: 500px;
    margin: 50px auto;
}

main h3 {
    height: 100px;
    line-height: 100px;
    text-align: center;
    color:#6699CC;
}

.tabsbox {
    width: 900px;
    margin: 0 auto;
    height: 400px;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
}

nav ul {
    overflow: hidden;
}

nav ul :hover{
    background-color: #6699CC;
    color: #fff;
}

nav ul li {
    float: left;
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-right: 1px solid #ccc;
    position: relative;
}

nav ul li.liactive {
    border-bottom: 2px solid #fff;
    z-index: 9;
}

#tab input {
    width: 80%;
    height: 60%;
}

nav ul li span:last-child {
    position: absolute;
    user-select: none;
    font-size: 12px;
    top: -18px;
    right: 0;
    display: inline-block;
    height: 20px;
}

.tabadd button{
     position: absolute;
     width: 80px; 
     height: 30px;
     line-height: 30px;
     font-size: 15px;
     top: 10px;
     right: 10px;
     border-radius: 5px;
     background-color: #6699CC;
     border: none;
     color: #fff;
     cursor: pointer;
 } 

.tabscon {
    width: 100%;
    height: 300px;
    position: absolute;
    padding: 30px;
    top: 50px;
    left: 0px;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
    display: none;
    width: 100%;
    height: 100%;
}

.tabscon section.conactive {
    display: block;
}

nav ul li .icon-guanbi {
    position: absolute;
    right:0;
    top:0;
}

tab.js

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.section = this.main.querySelector('.tabscon')
        this.add = this.main.querySelector('.tabadd')
        // this.remove = this.main.querySelectorAll('.icon-guanbi')
        // li的父元素
        this.ul = this.main.querySelector('.firstnav ul:first-child')
        this.init();
    }
    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;
        // 双击事件是 ondblclick
        this.spans[i].ondblclick = this.editTab;
        this.sections[i].ondblclick = this.editTab;
        }
    }
    // 因为动态获添加元素 需要重新获取元素  获取所有的小li 和section 和 remove
    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('.firstnav li span:first-child')
    }
    // 1、切换功能
    toggleTab() {
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.index].className = 'conactive';
    }
    clearClass() {
        for( var i = 0; i < this.lis.length; i++) {
           this.lis[i].className = '';
           this.sections[i].className = '';
        }
    }
    // 2、添加功能
    addTab() {
        that.clearClass();
         // 1、创建li元素和section元素
         var li = '<li class="liactive"><span>新建选项</span><span class="iconfont icon-guanbi">×</span></li>'
         var section ='<section class="conactive">请输入你要编辑的内容......</section>'
         if(that.lis.length <= 7){
         // 2、把这两个元素追加到对应的父元素里面
         that.ul.insertAdjacentHTML('beforeend', li);
         that.section.insertAdjacentHTML('beforeend',section);
         }else{
            return alert('选项数已达上限，无法添加！！！')
         }
         that.init();
    }
    // 3、删除功能
    removeTab(e) {
        e.stopPropagation();  // 阻止冒泡 防止触发父元素li 的切换点击事件
        // 拿到父亲的索引号
        var index = this.parentNode.index;
        // 根据索引号删除对应的li和section remove()方法可以直接删除指定的元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.init();
        // 当我们删除了一个元素后 需要让当前元素处于选定状态
        //当我们删除的不是原来选中状态的li时 原来选中状态应该保持不变才行 需要设置一个函数来判断删除的tab是不是处于选中状态
        // 手动调用我们的点击事件 不需要手动触发
        if(document.querySelector('.liactive')) return;
        index--;
        that.lis[index] && that.lis[index].click();
    }
    // 4、修改功能
    editTab() {
        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;
        input.select(); // 让文本框里面的文字处于选定状态
        // 当我们离开文本框 就把文本框里的值给span
        input.onblur = function(){
            // 此时this指向input
            this.parentNode.innerHTML = this.value
        };
        // 按下回车也可以把文本框里面的值给span
        input.onkeyup = function(e){
           if( e.key === 'Enter'){
               // enter键值为13
               this.blur();
           }
        };
    }
}

new Tab('#tab');

如果觉得对你有帮助，请点个赞！！！码字不易