Tab选项卡是大多数网页中必不可少的展示功能，它可以在网页中完美的展示多列表内容，使页面布局更合理，内容展示更方便，它和轮播焦点图异曲同工，但也有本质上的不同。平时我们可以用函数的方式完成一个tab选项卡，但是不方便我们到处调用，那么今天咱们就用面向对象的方法动手封装一个基于jQuery的tab选项卡插件。

首先，我们先搭建tab选项卡的DOM结构和CSS样式。

<div class="tab js-tab" data-config='{
                                     "triggerType":"click",
                                     "effect":"fade",
                                     "invoke":1,
                                     "auto":3000
                                     }'>
  <ul class="tab_nav">
    <li class="active"><a href="javascript:;">新闻</a></li>
    <li><a href="javascript:;">娱乐</a></li>
    <li><a href="javascript:;">电影</a></li>
    <li><a href="javascript:;">科技</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>

CSS样式自己根据需求来写就好，这里有几个点就是，选项卡导航和对应的内容页的当前展示分别用添加active和current类来完成。

DOM结构和CSS样式完成后就是JS调用，调用的时候要先引入jQuery文件，然后调用方法如下：

$(“.js-tab”).tab();

其中$(“.js-tab”)这个对象就是选择tab选项卡执行tab()这个方法就好，参数配置在DOM结构中的data-config属性中。

{
"triggerType":"click",
"effect":"fade",
"invoke":2,
"auto":false
}

其中，

triggerType –用来定义鼠标的触发类型，是click还是mouseover；

effect –用来定义内容切换效果，是直接切换还是淡入淡出效果;

invoke –默认展示第几个tab;

auto –定义tab是否自动切换，及自动切换时间间隔;

想看不同参数配置展示不同效果的狠戳这里，完整代码下载点击这里。

嫌看代码费劲或是看不太懂的，这里还有慕课网的视频教程：https://www.imooc.com/learn/825