第一课：面向对象案例：tab切换（2021/4/10 - 2021/4/11）

青旅半醒 2022-11-18 01:15 27阅读 0赞

// 功能需求:
    // 1．点击tab栏,可以切换效果.
    // 2．点击＋号,可以添加tab项和内容项.
    // 3．点击x号,可以删除当前的tab项和内容项.
    // 4．双击tab项文字或者内容项文字可以修改里面的文字内容.
    
    // step1:抽取共用方法和属性
    
    // 抽象对象: Tab对象
    // 1．该对象具有切换功能
    // 2.该对象具有添加功能
    // 3.该对象具有删除功能
    // 4.该对象具有修改功能
    var that;
    class Tab {
      constructor(id) {
        that = this;
        //  获取元素
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');
        // li的父元素
        this.ul = this.main.querySelector('.firstnav ul:first-child');
        // section的父元素
        this.fsection = this.main.querySelector('.tabscon');
        this.init();
      }
      // 为了解决添加新的元素没有点击效果和状态显示异常的问题，新建一个新的方法
      // 获取所有的小li 和section
      updateNode(){
        this.lis = this.main.querySelectorAll('li'); //获取所有li
        this.section = this.main.querySelectorAll('section');//获取下面的所有section
      }
      // init 初始化操作让相关的元素绑定事件
      init(){
        this.updateNode();
        this.add.onclick = this.addTab;
        for(var i = 0; i< this.lis.length;i++){
          this.lis[i].index = i;//给每个li添加索引
          //给每个li添加点击事件
          this.lis[i].onclick = this.toggleTab;
        }
      }
      // 1.切换功能
      toggleTab(){
        that.clearClass(); //清除所有再设置更改的那一条
        this.className = 'liactive'; //this指向单个li
        that.sections[this.index].className = 'conactive'; //获取实例对象的sections
      }
      // 清除所有li和section的样式
      clearClass(){
        for(var i = 0;i<this.lis.length;i++){
          this.lis[i].className = '';
          this.section[i].className = '';
        }
      }
      // 2.添加功能
      // 第一步:创建新的选项卡li和新的内容section
      // 第二步:把创建的两个元素追加到对应的父元素中.
    
      addTab(){
        // 先所有class表现状态的都清除掉，再去添加新的 
        that.clearClass();
        // 设置一个随机数看看是不是每次创建都是不一样的
        var random = Math.random();
        // (1) 创建li元素和section元素
        var li = '<li class="liactive"><span>新选项卡</span><i class="iconfont icon-error"></i></li>'
        // section跟着一起添加
        var section = '<section class="conactive">测试 ' + random +'</section>'
        // (2) 把这两个元素追加到对应点父元素里面
        // appendChild方法需要创建新节点元素再添加，而这个方法可以通过字符串的形式添加html，更快捷方便
        that.ul.insertAdjacentHTML('beforeend',li);
        that.init(); //每次添加新标签都要重新获取之前以及现在的li和section的所有内容
       
      }
      // 3.删除功能
      removeTab(){}
      // 4.修改功能
      editTab(){}
    }
    
    var tab = new Tab('#tab'); //执行的时候立即执行constructor的函数