动态标签切换

  * {
    padding: 0;
    margin: 0;
  }

  .tab {
    width: 800px;
    margin: 100px auto;
    position: relative;
  }

  .tab h3 {
    margin: 20px auto;
    text-align: center;
  }

  .tab-nav ul {
    list-style: none;
    height: 35px;
    border: 1px solid #484;
    border-bottom: 1px solid #eee
  }

  .close {
    position: absolute;
    right: 2px;
    top: 2px;
    background: url('../images/取消-错误.png') no-repeat center;
    height: 8px;
    width: 8px;
    color: #ccc
  }

  .red {
    background-color: red;
  }

  .tab-nav ul li {
    position: relative;
    line-height: 35px;
    float: left;
    padding: 0 20px;
    border-right: 1px solid #eee;
    cursor: pointer;
  }

  .tab-add {
    position: absolute;
    right: 10px;
    top: 52px;
    font-size: 16px;
    border: 1px solid #eee;
    color: #aaa;
    text-decoration: none;
    padding: 0 5px;
  }



  .tab-nav ul li:first-child {
    border-bottom: 0
  }

  .content {
    height: 500px;
    border: 1px solid #484;
    border-top: 0;
    display: none
  }

  .inputText {
    height: 25px;
    width: 100px;
    border-radius: 5px;
    border: 0;
    box-shadow: -2px 0px 2px rgba(0, 0, 0, .3)
  }

  .togDisplay {
    display: block;
  }

  .txtArea {
    width: 80%;
    height: 80%;
    margin: 10px;
    resize: none;
  }

<div class="tab">
    <h3>动态标签切换</h3>
    <div class="tab-nav">
      <ul>
        <li class="red"><span>导航1</span><a class="close" href="javascript:;"></a></li>
        <li><span>导航2</span><a class="close" href="javascript:;"></a></li>
        <li><span>导航3</span><a class="close" href="javascript:;"></a></li>
      </ul>
      <a href="javascript:;" class="tab-add">+</a>
    </div>
    <div class="contentBox">
      <div class="content togDisplay">
        <div>内容1</div>
      </div>
      <div class="content">
        <div>内容2</div>
      </div>
      <div class="content">
        <div>内容3</div>
      </div>
    </div>
  </div>

    var that
    class Tab {
      constructor() {
        that = this
        this.init()
      }
      init() {
        this.ul = document.querySelector('.tab-nav ul')
        this.lis = this.ul.querySelectorAll('li')
        this.addBtn = document.querySelector('.tab-add')
        this.closeBtn = document.querySelectorAll('.close')
        this.content = document.querySelectorAll('.content')
        this.contentBox = document.querySelector('.contentBox')
        for (let i = 0; i < this.lis.length; i++) {
          this.lis[i].index = i
          this.lis[i].onclick = this.toggleTab
          this.lis[i].firstElementChild.ondblclick = this.editTab
          this.content[i].ondblclick = this.editTab
        }
        for (let i = 0; i < this.closeBtn.length; i++) {
          this.closeBtn[i].index = i
          this.closeBtn[i].onclick = this.deleteTab
        }
        this.addBtn.onclick = this.addTab
      }
      toggleTab(i) {
        if (i >= 0) {
          that.clearClass()
          that.lis[i].classList.add('red')
          that.content[i].classList.add('togDisplay')
        } else {
          that.clearClass()
          this.classList.add('red')
          that.content[this.index].classList.add('togDisplay')
        }
      }
      deleteTab(e) {
        e.stopPropagation()
        this.parentElement.remove()
        that.content[this.parentElement.index].remove()
        if (!document.querySelector('.red')) {
          var index = this.index - 1 > 0 ? this.index - 1 : 0
          that.init()
          return that.toggleTab(index)
        }
        that.init()
      }
      clearClass() {
        for (let i = 0; i < that.lis.length; i++) {
          that.lis[i].classList.remove('red')
          that.content[i].classList.remove('togDisplay')
        }
      }
      addTab() {
        that.clearClass()
        that.ul.insertAdjacentHTML("beforeend",
          '<li class="red"><span>新选项卡</span><a class="close" href="javascript:;"></a></li>')
        that.contentBox.insertAdjacentHTML("beforeend", '<div class="content togDisplay"><div>new</div></div>')
        that.init()
      }
      editTab(e) {
        var that = this
        if (e.target.tagName == 'SPAN') {
          debugger
          this.style.display = 'none'
          var ipt = document.createElement('input')
          ipt.className = 'inputText'
          ipt.value = this.innerHTML
          ipt.addEventListener('keydown', function (e) {
            if (e.keyCode == 13) {
              this.blur()
            }
          })
          ipt.onblur = function (e) {
            that.innerHTML = ipt.value
            that.style.display = 'block'
            this.remove()
          }
          this.parentElement.insertBefore(ipt, this.querySelector('.close'))
          ipt.select()

        } else if (e.target.tagName == 'DIV') {
          var that = this
          var txtArea = document.createElement('textarea')
          txtArea.className = 'txtArea'
          txtArea.value = this.firstElementChild.innerHTML
          txtArea.onkeydown = function (e) {
            if (e.keyCode == 13) {
              this.blur()
            }
          }
          txtArea.onblur = function () {
            that.firstElementChild.innerHTML = this.value
            this.remove()
            that.firstElementChild.style.display = 'block'
          }
          this.appendChild(txtArea)
          txtArea.focus()
          this.firstElementChild.style.display = 'none'
        }
      }
    }
    var a = new Tab()