JavaScript - 选项卡切换、增加、删除、修改【面向对象方法】

效果

代码 html

 羊村成员资料库
    
        
        
            

                
喜羊羊
                
懒羊羊
                
美羊羊

                
                    +
                
            
        

        
        
            
我是喜羊羊
            
我是懒羊羊
            
我是美羊羊
        
    

记得在后面引入js

CSS

JavaScript

思路：

/* 1、点击tab栏切换效果

2、点击加号添加tab栏和内容

3、点击×号，删除tab项和内容

4、双击tab文字或内容，可以修改里面的文字内容*/


/* 面向对象：把公共的属性和方法抽取出来，写到类里面，再根据类实例化对象 */

//Tab对象：1、切换 2、添加 3、删除 4、修改

var that;   //声明一个全局变量that，用来存储contructor里的this
class Tab {     //tab选项卡是一个类
    constructor(id) {
        //获取元素
        that = this;    //改变that的值,让that指向我们的Tab对象
        this.main = document.querySelector(id);    //获取整个tabsbox  
        this.add = this.main.querySelector('.tabadd');
        //获取选项栏标题里的加号
        this.ul = this.main.querySelector('.firstnav ul:first-child');
        //获取选项卡的顶部按钮栏
        this.fsection = this.main.querySelector('.tabscon');
        //获取选项卡的内容
        this.init();  //调用init函数
    }
    init() {
        this.updateNode();  //init 初始化 *** 作让相关元素绑定事件
        this.add.onclick = this.addTab;  //如果右侧的＋号被点击了，就给this添加点击事件addTab
        for (var i = 0; i < this.lis.length; i++) {     //遍历选项卡顶部的li
            this.lis[i].index = i;   //给选项卡顶部的li索引号 
            this.lis[i].onclick = this.toggleTab; //给被点击的小li添加切换事件
            this.remove[i].onclick = this.removeTab;
            //给被点击的小li添加删除事件
            this.spans[i].ondblclick = this.editTab;
             //给被点击的顶部小li添加编辑事件
            this.sections[i].ondblclick = this.editTab;
             //给被点击的选项卡内容添加编辑事件

        }

    }

    //获取所有li和section（因为经过增删后li的数量会变，如果在contructor里获取li的话，就没办法更新，所以把一些后面数量会变的元素，如lis顶部的选项按钮  sections选项卡的内容 选项按钮的叉号等 写在一个updateNode()方法里面，再把它放到init()方法里。

当每次有东西被点击，调用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('.firstnav li span:first-child');
    }

    //* 选项栏切换 清空所有li和section
    // 在点击一个新的选项栏按钮的时候，要把之前被选中的按钮，和之前的选项卡内容清空，之后给新的按钮绑定，不会有两个同时存在的情况
    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }

    //1、切换功能
    toggleTab() {
        that.clearClass();  //先清除障碍
        //clearClass()里面有this.lis，只有最大的盒子下面才有小li，这里要写that，是整个Tab的li
        this.className = 'liactive';     //让被选中的this小li使用选中的类样式
        that.sections[this.index].className = 'conactive';
        //让Tab盒子的选项卡内容的sections，它的与被点击的this小li对应的索引号相同，让这样的选项卡内容使用active的类名，样式变为选中。



    }
   
    //2、添加功能
    addTab() {
        that.clearClass();  //清除障碍
        //（1）创建li元素和section元素
        var random = Math.random();     //（可选）声明一个随机数的类，后面新增的选项卡的选项名随机生成数字
        var li = '  
沸羊羊
';
        //声明一个选项卡标题li，这里内容是html的格式，因为后面要用.insertAdjacentHTML追加的对应的父元素后面
        var section = ' 
我是' + random + '沸羊羊
';
        //声明一个选项卡内容section

        //（2）将两个元素追加到对应父元素
        //利用insertAdjacentHTML() 追加
        that.ul.insertAdjacentHTML('beforeend', li);
        //beforeend指的是内容的里面的最后面
        that.fsection.insertAdjacentHTML('beforeend', section);

        that.init();
        //重新init()以下，给新增的li和section增加切换、删除和编辑事件
    }
    //3、删除功能 
    //思路：点击×可以删除索引号对应的li和section
    removeTab(e) {
        e.stopPropagation(); //阻止冒泡，防止触发li的切换点击事件
        var index = this.parentNode.index;  //获得被点击的×号的父元素的索引号（×号在li里面，获得的是li的索引号）
        that.lis[index].remove(); //×号对应的li被删除
        that.sections[index].remove(); //×号对应的section内容被删除
        that.init();  //init()以下 重新获得元素的状态

        //（1)当删除的不是选定状态的li，原来的选定状态的li保持不变
        if (document.querySelector('.liactive')) return;
        //(2)当删除选定状态li的适合，前一个li处于选定状态
        index--;    //当删除完一个东西后，让索引号自减1
        that.lis[index] && that.lis[index].onclick();
        //让被删除的那个按钮的前一个按钮（索引号-1）显示选中状态
        //这里用&&的思路是，如果that.lis[index]返回true，再执行that.lis[index].onclick()，也就是如果减1后的索引号存在再执行，因为有可能你删除的是第一个按钮（索引号为0）再减去1后为-1，这时that.lis[-1]不存在，就不用执行下一步报错了。


    }

    //4、修改功能
    //双击文字的时候，在里面生成文本框，失去焦点的时候，把文本框的值赋给原来的
    editTab() {
        var str = this.innerHTML;  //声明一个str来装这个选项按钮原来的内容
        //双击禁止选定文字（这个不用理解，复制来用即可）
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        this.innerHTML = '';

        var input = this.children[0];
          // 声明一个input输入框，把当前这个按钮的第一个child，也就是装着“喜羊羊”的span，赋值给它
        input.value = str;
        //把当前按钮的文字赋值给input，这时候用户看到的是一个输入框，输入框里是原来的文字；因为上面一行代码，这时候span里的内容也被改变了，失焦的时候能看到span里的内容和input里用户修改后的文字一样
        input.select();  //让输入框里的文字被全选，
        input.onblur = function () {
            this.parentNode.innerHTML = this.value;
        }   //如果用户不想改了，失去焦点就会留下原来的文字

        //按下回车也可以把文本框里的值给span
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                //手动调用表单失去焦点事件 不需要鼠标离开 *** 作
                this.blur();
            }
        }
    }
}

new Tab('#tab');