js面向对象的选项卡

Posted 2021-02-01 basic0001

 

前言：

选项卡在项目中经常用到，也经常写，今天在github突然看到一个面向对象的写法，值得收藏和学习。

本文内容摘自github上的 helloforrestworld/javascriptLab ，稍作删减和整理，仅作记录和自学用途。在此感谢原作者。

 

html代码如下：

<div class="tab_wrap">
    <div class="tab_item" id="tab1">
      <div class="btns">
        <span class="active">菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
      </div>
      <div class="container">
        <p class="active">11111</p>
        <p>22222</p>
        <p>33333</p>
      </div>
    </div>
    <div class="tab_item" id="tab2">
      <div class="btns">
        <span class="active">栏目一</span>
        <span>栏目二</span>
        <span>栏目三</span>
        <span>栏目四</span>
      </div>
      <div class="container">
        <p class="active">内容一</p>
        <p>内容二</p>
        <p>内容三</p>
        <p>内容四</p>
      </div>
    </div>
  </div>

 

css代码如下：

.tab_wrap {
      /*width: 60%;*/
      margin: 0 auto;
      background-color: #f0f0f0;
      display: flex;
    }
  
    .tab_item {
      width: 300px;
      box-shadow: 2px 0px 4px rgba(0, 0, 0, 2);
      margin: 0 40px;
  
    }
  
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  
    .btns span {
      flex: 1;
      display: block;
      text-align: center;
      border-bottom: 2px solid #000;
      padding: 5px 0;
      transition: 200ms;
      cursor: default;
    }
  
    .btns span:hover {
      border-bottom: 2px solid rgb(46, 131, 242);
    }
  
    .btns span.active {
      border-bottom: 2px solid rgb(46, 131, 242);
      background-color: rgba(46, 131, 242, .2);
    }
  
    .container {
      height: 260px;
    }
  
    .container p {
      display: none;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 260px;
    }
  
    .container p.active {
      display: block;
    }

 

重点来了，js代码如下：

<script>
  // 构造函数
  function Tab(item){
    var tab = document.getElementById(item);

    this.btns = tab.querySelectorAll(‘span‘);
    this.texts = tab.querySelectorAll(‘p‘);
    this.prev = 0;
    this.len = this.btns.length;

    this.current = 0;

    return this;
  }

  Tab.prototype.toTap = function(){
    var _this = this;
    for (var i = 0; i < this.len; i++) {
      this.btns[i].index = i;
      this.btns[i].onclick = function(){
        _this.play(this.index)
      }
    }
  }

  Tab.prototype.play = function (index) {

    this.btns[this.prev].classList.remove(‘active‘);
    this.texts[this.prev].classList.remove(‘active‘);

    this.btns[index].classList.add(‘active‘);
    this.texts[index].classList.add(‘active‘);

    this.prev = index;
  }

  var tab1 = new Tab(‘tab1‘);
  tab1.toTap();
  var tab2 = new Tab(‘tab2‘);
  tab2.toTap();
</script>

 

总结：

该方法代码简洁语义明了。定义一个构造函数，在该函数原型上添加方法。在需要的地方new一个实例即可，可重用性非常高。