JQuery选项卡制作插件tabBox

简介

jQuery Tab 是一款可以简单方便制作选项卡的 jQuery插件，它具有垂直滚动，水平滚动 ，点击触发，划过触发和自动切换等效果。

参数说明：

tabId:切换的标签父级容器
tabTag:切换的具体标签
conId：切换的内容父级容器
conTag：切换的具体内容容器
act：事件（click为鼠标点击，mouseover为鼠标经过）
effact：具体内容切换效果（scrolly为垂直滚动或者是上下滚动，scrollx为水平滚动或者左右滚动，slow为缓动效果，为空则无效果即为普通切换）
auto：是否自动切换（true 为自动  false不自动切换）
dft：设置起始显示序列从0开始数

（下载的附件中带有DEMO）

使用

1.  引入 jquery.js 和 tabBox.js 文件

2. HTML

<div id="testtab" >
  <div id="tabtag">
    <ul>
      <li>菜单一</li>
      <li>菜单二</li>
      <li>菜单三</li>
    </ul>
  </div>
  
  <div id="tabcon" >
    <div>
      <ul>
        <li><a href="#">内容一</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#">内容二</a></li>
      </ul>
    </div>
    <div>
      <ul>
        <li><a href="#">内容三</a></li>
      </ul>
    </div>
  </div>
</div>

//CSS
<style type="text/css">
.testtab{ border:4px solid #ccc; width:500px;height:400px;}
.tabtag{ line-height:24px; height:24px; border-bottom:2px solid #ccc;}
.tabtag li{ float:left; width:24%; text-align:center; background:#eee;}
.tabtag li.cur{ color:#900; background:#fff;}
.tabcon{ height:100px; overflow:hidden;}
.tabcon div{ height:80px; padding:10px; color:#900; font-size:14px;}
.tabcon li{ line-height:22px;}
</style>

3.  调用

<script type="text/javascript">
  $(document).ready(function(){
    $("#testtab").tab({
      tabId:"#tabtag",
      // 切换控制器的 ID
      
      tabTag:"li",
      // 切换控制器标签
      
      conId:"#tabcon",
      // 内容容器 ID
      
      conTag:".tabcon"
      // 容器标签
      
      //auto:true,
      // 自动切换
      
      //act:"click",
      // 点击触发 也可以不设置 默认就为 click 设置为 mouseover 则为鼠标划过
      
      //effact:"scrolly",
      // 效果为纵向滚动,横向滚动效果为
      
      scrollx//dft:0,
      // 设置起始显示序列
      
      //effact:"slow"
      // "slow" 效果
    })
  })
</script>

相关链接

GitHub 地址：https://github.com/Desteel/jQuery-TabBox

在线演示 ：https://codepen.io/Dest/pen/BMQpXp?editors=0010