安信娱乐谁是老板

拼图开发文档

选项卡

基本样式

内容一
内容二
内容三
    <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>
  

参数说明

参数类型默认值参数值说明
togglestring//切换时触发对象
toggle_classclassactive/触发后对象元素添加的样式类
targetstring//目标对象
target_classclassactive/触发后对应目标添加的样式类
mousestringclick点击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>