选项卡

基本样式

内容一

内容二

内容三

    <div class="tab" id="tab">
      <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:;">选项一</a></li>
        <li><a href="javascript:;">选项二</a></li>
        <li><a href="javascript:;">选项三</a></li>
      </ul>
      <div class="tab-body">
        <div class="tab-item active">内容一</div>
        <div class="tab-item">内容二</div>
        <div class="tab-item">内容三</div>
      </div>
    </div>

调用方法

    <script>
      $(function(){
        $('#tab').tab({'toggle':'#tab>ul>li','target':'#tab>.tab-body>.tab-item'});
      });
    </script>

参数说明

参数	类型	默认值	参数值	说明
toggle	string	/	/	切换时触发对象
toggle_class	class	active	/	触发后对象元素添加的样式类
target	string	/	/	目标对象
target_class	class	active	/	触发后对应目标添加的样式类
mouse	string	click	点击click 悬浮mouseover	触发行为

参数的应用，不仅限于.tab样式类，还可以应用于自定义的样式上。

选项卡导航

卡片导航

内容一

内容二

内容三

    <div class="card" id="card">
      <div class="card-head">
        <ul class="nav nav-tabs card-head-nav">
          <li class="active"><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
        </ul>
      </div>
      <div class="card-body card-tab active">内容一</div>
      <div class="card-body card-tab">内容二</div>
      <div class="card-body card-tab">内容三</div>
    </div>
    <script>
      $(function(){
        $('#card').tab({
          'toggle':'#card>div>ul>li',
          'target':'#card>.card-body',
          'mouse':'mouseover'
        });
      });
    </script>

标签导航

在.tab上叠加.tab-box样式，可给内容添个盒子外框。

内容一

内容二

内容三

    <div class="tab tab-box" id="tabbox">
      <ul class="nav nav-tabs nav-block">
        <li class="active"><a href="javascript:;">选项一</a></li>
        <li><a href="javascript:;">选项二</a></li>
        <li><a href="javascript:;">选项三</a></li>
      </ul>
      <div class="tab-body">
        <div class="tab-item active">内容一</div>
        <div class="tab-item">内容二</div>
        <div class="tab-item">内容三</div>
      </div>
    </div>

    <script>
      $(function(){
        $('#tabbox').tab({
          'toggle':'#tabbox>ul>li',
          'target':'#tabbox>.tab-body>.tab-item',
        });
      });
    </script>