Demo案例：tab页切换

tab页切换功能

• 点击tab栏实现页面对应显示、
• 新增tab栏、
• 删除tab栏、
• 修改tab栏

1.Html

 <main>
    <!-- 大盒子 -->
    <div class="tabsbox" id="tab">

      <!-- tab标签栏 -->
      <nav class="firstnav">
        <ul>
          <li class="liactive">
            <span>看板1</span>
            <span class="iconfont icon-guanbi"></span>
          </li>
          <li>
            <span>看板2</span>
            <span class="iconfont icon-guanbi"></span>
          </li>
          <li>
            <span>看板3</span>
            <span class="iconfont icon-guanbi"></span>
          </li>
        </ul>
        <div class="tabadd">
          <span>新增空白tab +</span>
        </div>
      </nav>

      <!-- tab内容 -->
      <div class="tabscon">
        <section class="conactive"><img src="./img/1.png" alt=""></section>
        <section><img src="./img/2.png" alt=""></section>
        <section><img src="./img/3.png" alt=""></section>
      </div>
    </div>
  </main>

2.Css

* {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

main {
  width: 100%;
  background: rgb(0, 34, 93);
}


.tabsbox {
  width: 100%;
  position: relative;
}

nav ul {
  overflow: hidden;
  background: rgb(0, 34, 93);
  color: #fff
}

nav ul li {
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-right: 1px solid rgb(0, 129, 205);
  position: relative;
}

nav ul li.liactive {
  border-bottom: 2px solid rgb(0, 129, 205);
  z-index: 9;
}

#tab input {
  width: 90%;
  height: 80%;

}

nav ul li span:last-child {
  position: absolute;
  user-select: none;
  font-size: 12px;
  top: -18px;
  right: 0;
  display: inline-block;
  height: 20px;
}

.tabadd {
  position: absolute;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  top: 0;
  right: 0;
  margin-right: 50px;
}

.tabadd span {
  display: block;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgb(0, 28, 75);
  float: right;
  user-select: none;
}

.tabscon {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0px;
  box-sizing: border-box;
}
img{
  width: 100%;
}

.tabscon section,
.tabscon section.conactive {
  display: none;
  width: 100%;
  height: 100%;
  font-size:50px;
}

.tabscon section.conactive {
  display: block;
}

3.JavaScript

3.1 初始化

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();
  }
  init() {
    this.updateNode();
    // init 初始化操作让相关的元素绑定事件
    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.sections[i].ondblclick = this.editTab;

    }
  }
  // 因为我们动态添加元素 需要从新获取对应的元素
  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');
  }

3.2 切换功能的实现

  // 1. 切换功能
  toggleTab() {
    // console.log(this.index);
    that.clearClass();
    this.className = 'liactive';
    that.sections[this.index].className = 'conactive';
  }
  // 清除所有li 和section 的类
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = '';
      this.sections[i].className = '';
    }
  }

3.3 添加功能

  addTab() {
    that.clearClass();
    // (1) 创建li元素和section元素 
    var random = Math.random();
    var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">请输入内容：';
    // (2) 把这两个元素追加到对应的父元素里面
    that.ul.insertAdjacentHTML('beforeend', li);
    that.fsection.insertAdjacentHTML('beforeend', section);
    that.init();
  }

3.4 删除功能

  // 3. 删除功能
  removeTab(e) {
    e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
    var index = this.parentNode.index;
    console.log(index);
    // 根据索引号删除对应的li 和section   remove()方法可以直接删除指定的元素
    that.lis[index].remove();
    that.sections[index].remove();
    that.init();
    // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
    if (document.querySelector('.liactive')) return;
    // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
    index--;
    // 手动调用我们的点击事件  不需要鼠标触发
    that.lis[index] && that.lis[index].click();
  }

3. 5 修改功能

 // 4. 修改功能
  editTab() {
    var str = this.innerHTML;
    // 双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    // alert(11);
    this.innerHTML = '<input type="text" />';
    var input = this.children[0];
    input.value = str;
    input.select(); // 文本框里面的文字处于选定状态
    // 当我们离开文本框就把文本框里面的值给span 
    input.onblur = function () {
      this.parentNode.innerHTML = this.value;
    };
    // 按下回车也可以把文本框里面的值给span
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        // 手动调用表单失去焦点事件  不需要鼠标离开操作
        this.blur();
      }
    }
  }