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

描述：jQuery Tab 是 jQuery 的插件。它具有垂直滚动，水平滚动 ，点击触发，划过触发和自动切换等效果。 图片展示： 兼容浏览器： IE6+/Firefox/Google Chrome 官方链接： 暂无 JS下载：http://ijquery.360sites.cn/js/tabBox.js 预览： http://ijquery.360sites.cn/demo/tabBox 打包下载： http://ijquery.360sites.cn/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://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://ijquery.360sites.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" class="testtab" >                  <div id="tabtag" class="tabtag">                 <ul>                         <li class="cur">菜单一</li>                         <li>菜单二</li>                         <li>菜单三</li>                 </ul>         </div>         <div id="tabcon" >                 <div class="tabcon">                         <ul>                                 <li><a href="#">内容一</a></li>                         </ul>                 </div>                 <div class="tabcon">                         <ul>                                 <li><a href="#">内容二</a></li>                         </ul>                 </div>                 <div class="tabcon">                         <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;} 复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=2