3款 jquery tab

最新推荐文章于 2017-11-23 19:18:27 发布

mituan1234567

最新推荐文章于 2017-11-23 19:18:27 发布

阅读量670

点赞数

分类专栏： JQuery JavaScript

JQuery 同时被 2 个专栏收录

104 篇文章 1 订阅

订阅专栏

JavaScript

64 篇文章 0 订阅

订阅专栏

http://paulfzm.iteye.com/blog/866163

一、jQuery idTabs

idTabs 是 jQuery 的插件。它能非常容易的为网站添加选项卡，也为无穷尽的可能性敞开大门。

演示：http://www.sunsean.com/idTabs/
下载：http://www.sunsean.com/idTabs/jquery.idTabs.min.js

二、jQuery Tab

jQuery Tab 是 jQuery 的插件。它具有垂直滚动，水平滚动，点击触发，划过触发和自动切换等效果。

jQuery 部分：

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tab.js"></script>
<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>

xhtml 部分：

<div id="testtab">
  <div id="tabtag">
    <ul>
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li>
    </ul>
  </div>
  <div id="tabcon">
    <div class="tabcon"> 项目一内容 </div>
    <div class="tabcon"> 项目二内容 </div>
    <div class="tabcon"> 项目三内容 </div>
  </div>
</div>