选项切换卡－案例

/* 
点击tab栏，实现切换效果
点击 + 号，可以添加tab项和内容项
点击x 可以删除当前的tab项和内容项
双击tab项或者内容项文字 可以修改里面的文字内容
准备
 1 获取标题元素
 2 获取内容元素
 3 获取删除的小按钮x
 4 新建js文件  定义类 添加需要的属性和方法(切换 ，删除，增加，修改)
 5 注意this指向问题

*/

/* 
点击tab栏，实现切换效果
点击 + 号，可以添加tab项和内容项
点击x 可以删除当前的tab项和内容项
双击tab项或者内容项文字 可以修改里面的文字内容
准备
 1 获取标题元素
 2 获取内容元素
 3 获取删除的小按钮x
 4 新建js文件  定义类 添加需要的属性和方法(切换 ，删除，增加，修改)
 5 注意this指向问题
*/
var that
class Tab {
  constructor(id) {
    that = this
    this.main = document.querySelector("#tab")
    this.add = this.main.querySelector('.tabadd')
    this.ul = this.main.querySelector(".nav ul:first-child")
    this.fsection = this.main.querySelector('.tabscon')
    this.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
      this.spans[i].ondblclick = this.editTab
      this.section[i].ondblclick = this.editTab
    }
  }

  updateNode() {
    this.lis = this.main.querySelectorAll('li')
    this.section = this.main.querySelectorAll('section')
    this.remove = this.main.querySelectorAll('.icon-guanbi')
    this.spans = this.main.querySelectorAll('.nav li span:first-child')
  }
  //切换
  toggleTab() {
    that.clearClass()
    this.className = 'liactive'
    that.section[this.index].className = 'conactive'
  }
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = ''
      this.section[i].className = ''
    }
  }

  //删除
  removeTab(e) {
    e.stopPropagation()

    var index = this.parentNode.index
    that.lis[index].remove()
    that.section[index].remove()
    that.init()
    if (document.querySelector('.liactive')) return

    if (index !== 0) {
      index--
    }
    that.lis[index] && that.lis[index].click()
  }

  //添加
  addTab() {
    that.clearClass()
    var li = '<li class="liactive"><span> 新选项卡</span><span class="iconfont icon-guanbi"></span></li>'
    var section = '<section class="conactive">新测试项</section>'
    that.ul.insertAdjacentHTML('beforeend', li)
    that.fsection.insertAdjacentHTML('beforeend', section)
    that.init()
  }

  //修改
  editTab() {
    var str = this.innerHTML
    this.innerHTML='<input type="text"/>'
    var input = this.children[0]
    input.value = str
    input.select()
    input.onblur = function(){
      this.parentNode.innerHTML = this.value
    }
    input.onkeyup = function(e){
      if(e.keyCode===13){
        this.blur()
      }
    }
   }
}
new Tab('#tab')