代码干货｜多种tabs切换的应用

本文来源于阿里云-云栖社区，原文点击这里。

tabsMode 主要总结两种tabs切换的实现方式：JavaScript / jQuery；并最后实现一个jQuery的组件化开发

总体设计

• 整个tab设计可设计为一个大盒子(div)里面嵌套着两个小盒子(div)
• 上面的盒子(div)，主要放置导航栏的，类似于分类的
• 上盒子我们主要设计为由ul和若干个li标签，设计成一个导航栏
• 下面的盒子（div），主要是放置每个分类下面的主要内容
• 在下盒子里面，又增加了跟（li）数量相等的更小的盒子（div），用来放置相应的主题主体内容

    <div class="tab" id="tab">
        <ul class="tab-title" id="tab-title">
            <li class="select"><a href="#">公告</a></li>
            <li><a href="#">规则</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">安全</a></li>
            <li><a href="#">公益</a></li>
        </ul>

        <div class="tab-content" id="tab-content">
            <div class="tab-ct" style="display: block">ct1</div>
            <div class="tab-ct" style="display: none;">ct2</div>
            <div class="tab-ct" style="display: none;">ct3</div>
            <div class="tab-ct" style="display: none;">ct4</div>
            <div class="tab-ct" style="display: none;">ct5</div>
        </div>
    </div>

JavaScript开发模式

• 主要代码，如下：

    function $(id) {
        return typeof id == "string"?document.getElementById(id):id;
    }
    window.onload = function () {
        var titleName = $("tab-title").getElementsByTagName("li");
        var tabContent = $("tab-content").getElementsByTagName("div");
        if(titleName.length != tabContent.length){
            return;
        }
        for(var i = 0;i < titleName.length;i++){
            titleName[i].id = i;
            titleName[i].onmouseover = function () {
                for(var j = 0;j<titleName.length;j++){
                    titleName[j].className = "";
                    tabContent[j].style.display = "none";
                }
                this.className = "select";
                tabContent[this.id].style.display = "block";
            }
        }
    } ;

1、判断一下ul li的数量和tab-ct的数量是否相等
2、根据我们的鼠标触发的事件（mouseover，click。。。）来进行相应的操作
3、通过两个嵌套的遍历循环，来实现tab-title和tab-content两部分之间操作同步
4、因为tab-content部分设计的时候，每次只显示相对应位置的tab-ct，所以在页面构造的时候，预先设计了只显示第一个tab-ct，其余的都隐藏
5、当我们的鼠标事件移动到第几个位置的时候，分别给相应的title添加我们想要的样式，并且显示相应的content内容

jQuery开发模式

• 主要代码如下：

  $(document).ready(function () {
  var titleName = $(".tab-title li");
  var tabContent = $(".tab-content div");
  
  if(titleName.length != tabContent.length){
      return;
  }
  titleName.mouseover(function () {
      var index = $(this).index();
      $(this).addClass("select").siblings().removeClass("select");
      tabContent.eq(index).show().siblings().hide();
  });
  });
  

  1、判断一下ul li的数量和tab-ct的数量是否相等
  2、根据我们的鼠标触发的事件（mouseover，click。。。）来进行相应的操作
  3、jquery通过触发事件来进行相应的操作，稍微比JavaScript简洁一点
  4、因为tab-content部分设计的时候，每次只显示相对应位置的tab-ct，所以在页面构造的时候，预先设计了只显示第一个tab-ct，其余的都隐藏
  5、当我们的鼠标事件移动到第几个位置的时候，分别给相应的title添加我们想要的样式，并且显示相应的content内容

实现一个jQuery的组件化开发

• 因为实现组件化开发，需要把公共部分提取出来，以参数配置的形式进行展示

• 页面部分

  <div class="js-tab tab" data-config='{
                              "triggerType":"mouseover",
                              "effect":"fade",
                              "invoke":1,
                              "auto":2000}'>
      <ul class="tab-nav">
          <li class="actived"><a href="javascript:void(0)">新闻</a></li>
          <li><a href="#">电影</a></li>
          <li><a href="#">娱乐</a></li>
          <li><a href="#">科技</a></li>
      </ul>
  
      <div class="content-wrap">
          <div class="content-item current">
              A
          </div>
          <div class="content-item">
              B
          </div>
          <div class="content-item">
              C
          </div>
          <div class="content-item">
              D
          </div>
      </div>
  </div>
  

• 页面部分需要一个调用组件化js的函数

  <script type="text/javascript">
  $(function () {
  var tab1 = new Tab($(".js-tab").eq(0));

>>>展开全文