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

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

效果

代码 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');

    欢迎分享,转载请注明来源:内存溢出

    原文地址: https://outofmemory.cn/langs/563191.html

    (0)
    打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
    上一篇 2022-04-02
    下一篇 2022-04-02

    发表评论

    登录后才能评论

    评论列表(0条)

    保存