v三款 jQuery Tabs 选项卡插件推荐
一、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 |
< div id = "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 > |
二、jQuery idTabs
idTabs 是 jQuery 的插件。它能非常容易的为网站添加选项卡,也为无穷尽的可能性敞开大门。
三、jQuery tools tabs
jQuery tools tabs 它也是一款非常强大的 jQuery 选项卡插件。它也能非常容易的为网站添加选项卡,也为无穷尽的可能性敞开大门。