jQuery Tabs插件 (选项卡插件) --推荐

最新推荐文章于 2025-09-24 14:36:58 发布

原创最新推荐文章于 2025-09-24 14:36:58 发布 · 5.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #tabs #tools #function #tags

jQuery 专栏收录该内容

43 篇文章

订阅专栏

本文推荐了三款jQuery选项卡插件：jQueryTab、jQueryidTabs和jQuerytoolstabs，详细介绍了它们的功能和使用方法，并提供了代码示例。

三款 jQuery Tabs 选项卡插件推荐，效果请看：http://basketball.titan24.com/nba/focus/kikx/jQtab.html

一、jQuery Tab

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

jQuery Code：

 
    1<script type="text/javascript"src="js/jquery.tab.js"></script>
 
    2<script type="text/javascript">
 
    3$(document).ready(function() {
 
    4   $("#tab").tab({
 
    5       //dft:0,  // 起始显示项,默认为第一项 
 
    6       //auto:true,  // 自动切换,默认为关闭 
 
    7       //act:"mouseover",  // 鼠标划过,默认为单击 
 
    8       //effact:" scrollx",  // 横向滚动效果,纵向滚动为 scrolly
 
    9       //effact:"slow",  // "slow" 效果 
 
    10       tabId: ".tags", // 切换控制器 
 
    11       tabTag: "li", // 切换控制器标签 
 
    12       conId: ".panes", // 内容容器 
 
    13       conTag: ".pane" // 内容容器标签 
 
    14   }) 
 
    15})
 
    16</script>

xhtml Code：

 
    1<divid="tab">
 
    2 <ul class="tags">
 
    3   <li>项目一</li>
 
    4   <li>项目二</li>
 
    5   <li>项目三</li>
 
    6 </ul>
 
    7 <div class="panes">
 
    8   <div class="pane"> 项目一内容 </div>
 
    9   <div class="pane"> 项目二内容 </div>
 
    10   <div class="pane"> 项目三内容 </div>
 
    11 </div>
 
    12</div>