一、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 选项卡插件。它也能非常容易的为网站添加选项卡，也为无穷尽的可能性敞开大门。