码迷,mamicode.com
首页 > Web开发 > 详细

js面向对象的选项卡

时间:2019-01-04 14:38:29      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:面向对象   dimens   方法   items   .class   项目   author   lex   list   

 

前言:

选项卡在项目中经常用到,也经常写,今天在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一个实例即可,可重用性非常高。

 

js面向对象的选项卡

标签:面向对象   dimens   方法   items   .class   项目   author   lex   list   

原文地址:https://www.cnblogs.com/basic0001/p/10219141.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!