第2款插件：tabBox.js可以非常简单方便地制作选项卡

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

兼容浏览器： IE6+/Firefox/Google Chrome
官方链接： 暂无
JS下载：http://www.ijquery.cn/js/tabBox.js
预览： http://www.ijquery.cn/study/demo/tabBox
打包下载： http://www.ijquery.cn/study/demo/tabBox/tabBox.zip
参数说明：

tabId:切换的标签父级容器
tabTag:切换的具体标签
conId：切换的内容父级容器
conTag：切换的具体内容容器
act：事件（click为鼠标点击，mouseover为鼠标经过）
effact：具体内容切换效果（scrolly为垂直滚动或者是上下滚动，scrollx为水平滚动或者左右滚动，slow为缓动效果，为空则无效果即为普通切换）
auto：是否自动切换（true 为自动  false不自动切换）
dft：设置起始显示序列从0开始数

JS代码：

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/tabBox.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>

HTML代码：

<div id="testtab" >

<div id="tabtag">
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</div>
<div id="tabcon" >
<div>
<ul>
<li><a href="#">内容一</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">内容二</a></li>
</ul>
</div>
<div>
<ul>
<li><a href="#">内容三</a></li>
</ul>
</div>
</div>
</div>

CSS代码：

.testtab{ border:4px solid #ccc; width:500px;height:400px;}

.tabtag{ line-height:24px; height:24px; border-bottom:2px solid #ccc;}
.tabtag li{ float:left; width:24%; text-align:center; background:#eee;}
.tabtag li.cur{ color:#900; background:#fff;}
.tabcon{ height:100px; overflow:hidden;}
.tabcon div{ height:80px; padding:10px; color:#900; font-size:14px;}
.tabcon li{ line-height:22px;}