可添加删除修改等操作的web tab栏，原生js html css源码

话不多说，先上图：

当点击右侧的加号，会自动动态创建新的一个选项，如下图：

当点击标签右上角的叉号，会删除选项栏：

双击tab栏某一选项栏，可以更改选项栏的内容，如下图：

 接下来废话不多说了，上源码：

htnl机构：

   

   

   

   

   

   

       

           

• 张扬X

           

• 张扬X

           

• 张扬X

           

• 张扬X

           

+

       

       

           

                我是

           

           

                我是1

           

           

                我是2

           

           

                我是3

           

       

   

js源码：

//面向对象编程

var that;

class tab_toggle {

    //类不能传参

    constructor(obj, a, e) {

            that = this;

            this.parents = obj;

            this.tab = this.parents.querySelector(a); //a是string类型

            this.white_space = this.parents.querySelector(e);

            console.log(this.white_space);

            this.p = this.tab.querySelector('p');

            this.init();

 

        }

        // 1、添加操作

    Addnode() {

            //直接写方法

            var str = "

新标签X

";

            that.tab.insertAdjacentHTML('beforeend', str);

            var str1 = "

新：" + Math.random() + "

";

            that.white_space.insertAdjacentHTML('beforeend', str1);

            that.init();

            that.toggleclassName(that.li.length - 1);

 

        }

        // 2、删除操作

    delectli(e) {

            e.stopPropagation();

            var index = this.parentNode.index;

            that.li[index].remove();

            that.section[index].remove();

            //阻止冒泡

            //删完之后回退

            that.init();

            index--;

            that.li[index] && that.li[index].click();

 

        }

        // 3、渲染操作

    init() {

            this.obtain();

 

            for (var i = 0; i < this.li.length; i++) {

                //给每一个元素一个索引

                this.li[i].index = i;

                //li添加点击事件

                this.li[i].addEventListener('click', function() {

                    that.toggleclassName(this.index);

                });

                //给li添加删除事件

                this.span[i].onclick = this.delectli;

                //给li添加双击事件

                this.li[i].addEventListener('dblclick', this.edit)

            }

            this.p.onclick = this.Addnode;

        }

        // 4、获取操作

    obtain() {

            this.li = this.tab.querySelectorAll('li');

            this.section = this.white_space.querySelectorAll('.section');

            this.span = this.tab.querySelectorAll('span');

        }

        //toggle操作

    toggleclassName(index) {

            for (var i = 0; i < that.li.length; i++) {

                that.li[i].classList.remove('substitute');

                that.section[i].style.display = 'none';

            }

            that.li[index].classList.add("substitute");

            that.section[index].style.display = 'block';

        }

        //编辑操作

    edit() {

        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        var input = document.createElement('input');

        var str = that.li[this.index].innerText;

        str = str.slice(0, str.length - 1);

        input.value = str;

        that.li[this.index].appendChild(input);

        input.select();

        var index = this.index;

        input.onblur = function() {

            var str1 = this.value;

            console.log(str1);

            str1 = str1 + "X";

            console.log(str1);

            that.li[index].innerHTML = str1;

            this.remove();

        }

        input.addEventListener('keydown', function(e) {

            if (e.key === 'Enter')

                this.onblur();

        })

 

    }

};

var obj = new tab_toggle(document.querySelector('.fence'), '.tab', '.write_space');

// window.getSelection ? window.getSelection().removeAllRanges() : document.section.empty();