原生js面对对象Tab栏

当前位置:

首页 > temp > JavaScript教程 >

原生js面对对象Tab栏

场景：选项页

HTML：

<body> 
  <div id="center">
    <h4>tab栏</h4>
    <div class="tabsBox" id="tab">
      <!-- tab标签 -->
      <nav class="fisrstNav">
        <ul>
          <li class="liActive"><span>测试1</span><span class="icon"></span></li>
          <li><span>测试2</span><span class="icon"></span></li>
          <li><span>测试3</span><span class="icon"></span></li>
        </ul>
        <div class="tabadd">
          <span>+</span>
      </div>
      </nav>

      <!-- tab内容 -->
      <div class="tabscon">
        <section class="conactive">测试1</section>
        <section>测试2</section>
        <section>测试3</section>
      </div>
    </div>
  </div>
  
  <script src="./index.js"></script>
</body>

CSS：

#center{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  .tabsBox{
    width: 500px;
    height: 300px;
    border: 1px solid #000;
    .fisrstNav{
      position: relative;
      display: flex;
      height: 36px;
      justify-content: space-between;
      border-bottom: 1px solid #000;
      ul{
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        li{
          position: relative;
          height: 35px;
          padding: 0 15px;
          text-align: center;
          line-height: 35px;
          border-right: 1px solid #000;
          overflow: hidden;
          .icon{
            position: absolute;
            top: -8px;
            right: -8px;
            width: 18px;
            height: 18px;
            border-radius: 9px;
            background-color: #000;
            &::after{
              position: absolute;
              top: -7px;
              right: 9px;
              font-size: 6px;
              content: 'x';
              color: #fff;
            }
          }
        }
        .liActive{
          color: red;
        }
      }
      .tabadd{
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 10px;
        span{
          display: block;
          width: 15px;
          height: 15px;
          border:1px solid #000;
          text-align: center;
          line-height: 15px;
        }
      }
    }
    .tabscon{
      section{
        display: none;
        padding: 15px;
        width: 100%;
        height: 100px;
      }
      input{
        width: 80%;
        height: 100px;
        word-wrap: break-word;
      }
      .conactive{
        display: block;
      }
    }
  }
}

JS：

var that;
class Tab {
  constructor(id) {
    that = this;
    this.main = document.querySelector(id);
    this.ul = this.main.querySelector('.fisrstNav ul')
    this.tabscon = this.main.querySelector('.tabscon')
    this.add = document.querySelector('.tabadd');
    this.init()
  }
  //初始化相关操作与元素绑定
  init() {
    this.updataNode();
    this.add.onclick = this.addTab;
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
      this.spans[i].ondblclick = this.editTab;
      this.removeIcon[i].onclick = this.removeTab;
      this.sections[i].ondblclick = this.editTab;
    }
  }
  //更新DOM
  updataNode() {
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.removeIcon = this.ul.querySelectorAll('.icon');
    this.spans = this.main.querySelectorAll('.fisrstNav li span:first-child');
  }
  //切换功能
  toggleTab() {
    that.clearClass()
    this.className = 'liActive'
    that.sections[this.index].className = 'conactive'
  }
  //清除样式
  clearClass() {
    for (let i = 0; i < that.lis.length; i++) {
      this.lis[i].className = '';
      this.sections[i].className = '';
    }
  }
  //添加功能
  addTab() {
    that.clearClass()
    const li = `<li class="liActive">新选项卡<span class="icon"></span></li>`;
    const section = `<section class="conactive">新选项卡</section>`;
    // 在ul中最后插入li
    that.ul.insertAdjacentHTML('beforeend', li);
    // 在.tabscon中最后插入section
    that.tabscon.insertAdjacentHTML('beforeend', section);
    that.init();
  }
  //删除功能
  removeTab(e) {
    //防止冒泡
    e.stopPropagation();  
    var index = this.parentNode.index;
    //根据索引删除li和section
    that.lis[index].remove();
    that.sections[index].remove();
    //判断删除是否为选中li
    if (document.querySelector('.liActive')) return
    index--;
    //手动调用li的点击事件
    that.lis[index] && that.lis[index].click();
    that.init();
  }
  //修改功能
  editTab(){
    //双击禁止选中文字
    // 双击禁止选中文字
    const str = this.innerHTML;
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    this.innerHTML = `<input type="text" />`;
    const input = this.children[0];
    input.value = str;
    //文本框文字处于选中
    input.select();
    input.onblur = function () {
      this.parentNode.innerHTML = this.value;
      this.remove;
    }
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur();
      }
    }

  }
}

new Tab('#tab')

新手自己学习,有什么问题请大家多多谅解

来源：https://www.cnblogs.com/YouAreNotFishPoi/p/15214771.html

栏目列表