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

最新推荐文章于 2024-09-10 15:06:52 发布

最新推荐文章于 2024-09-10 15:06:52 发布 · 317 阅读

文章标签：

#javascript #xhtml #ViewUI

本文介绍并推荐了三款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" 效果 

    10tabId: ".tags",// 切换控制器 

    11tabTag: "li",// 切换控制器标签 

    12conId: ".panes",// 内容容器 

    13conTag: ".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>