jquery制作的多种选项卡效果
完整的html、css、js代码：
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* demo */
.demo{width:686px;margin:40px auto;position:relative;}
.demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;}
.demo dl dt{font-size:14px;color:#ff6600;margin-top:30px;font-weight:800;}
.demo dl dt,.demo dl dd{line-height:22px;}
/* tabbtn */
.tabbtn{height:30px;background:url(images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;}
.tabbtn li{float:left;position:relative;margin:0 0 0 -1px;}
.tabbtn li a{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;}
.tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}
.tabbtn li.current a{border-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;}
/* tabcon */
.tabcon{border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;position:relative;/*必要元素*/height:180px;overflow:hidden;}
.tabcon .subbox{position:absolute;/*必要元素*/left:0;top:0;}
.tabcon .sublist{padding:5px 10px;height:170px;}
/* leftcon */
#leftcon .subbox{width:9999em;}
#leftcon .subbox .sublist{float:left;width:664px;}
/* sublist */
.sublist{padding:10px;}
.sublist li{height:28px;line-height:28px;font-size:12px;}
.sublist li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
</style>
<div class="demo">
<h2>实例1、上下滑动选项卡切换</h2>
<ul class="tabbtn" id="move-animate-top">
<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>
<li><a href="#/js/items/">javascript 特效</a></li>
<li><a href="#/css3/items/">div+css 教程</a></li>
<li><a href="#/html5/items/">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon" id="topcon">
<div class="subbox">
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabcon end-->
</div>
<h2>实例2、左右滑动选项卡切换</h2>
<ul class="tabbtn" id="move-animate-left">
<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>
<li><a href="#/js/items/">javascript 特效</a></li>
<li><a href="#/css3/items/">div+css 教程</a></li>
<li><a href="#/html5/items/">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon" id="leftcon">
<div class="subbox">
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabcon end-->
</div>
<h2>实例3、淡隐淡现选项卡切换</h2>
<ul class="tabbtn" id="fadetab">
<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>
<li><a href="#/js/items/">javascript 特效</a></li>
<li><a href="#/css3/items/">div+css 教程</a></li>
<li><a href="#/html5/items/">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon" id="fadecon">
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabcon end-->
<h2>实例4、默认选项卡切换</h2>
<ul class="tabbtn" id="normaltab">
<li class="current"><a href="#/jquery/items/">jquery 特效</a></li>
<li><a href="#/js/items/">javascript 特效</a></li>
<li><a href="#/css3/items/">div+css 教程</a></li>
<li><a href="#/html5/items/">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon" id="normalcon">
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/jquery/table/bgbs/2012-03-21/462.html" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-09-11/755.html" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-12/656.html" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
<li><span>▪</span><a href="#/jquery/popup/2012-06-01/638.html" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-28/508.html" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
<li><span>▪</span><a href="#/jquery/table/more/2012-03-27/506.html" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/js/images/more/2012-05-15/608.html" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
<li><span>▪</span><a href="#/js/images/qh/2012-03-22/480.html" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
<li><span>▪</span><a href="#/js/images/cj/2012-03-14/420.html" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
<li><span>▪</span><a href="#/js/images/cj/2011-08-08/110.html" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#/js/letter/qh/2012-03-18/438.html" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
<li><span>▪</span><a href="#/js/letter/ss/2012-03-18/436.html" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/css3/layout/2011-10-13/215.html" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
<li><span>▪</span><a href="#/css3/layout/2011-02-21/36.html" target="_blank">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#/css3/menu/2012-03-12/394.html" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
<li><span>▪</span><a href="#/css3/menu/2011-09-21/197.html" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-23/482.html" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
<li><span>▪</span><a href="#/css3/css3/2012-03-13/402.html" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
</ul>
</div><!--tabcon end-->
<div class="sublist">
<ul>
<li><span>▪</span><a href="#/html5/tx/2011-08-13/120.html" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-21/42.html" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#/html5/tx/2011-02-19/16.html" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
<li><span>▪</span><a href="#/html5/tb/2012-03-21/470.html" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
<li><span>▪</span><a href="#/jquery/calendar/2012-03-19/450.html" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
<li><span>▪</span><a href="#/jquery/rating/2012-06-05/644.html" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabcon end-->
<dl>
<dt>应用说明：</dt>
<dd>* 应用对象必须为标签按钮的直接父元素，且父元素内不包含其他非按钮元素</dd>
<dd>* example:
<pre>
$( ".menus_wrap" ).tabso({
cntSelect:".content_wrap",
tabEvent:"mouseover"
});
</pre>
</dd>
<dd>* cntSelect：内容块的直接父元素的 jq 选择器</dd>
<dd>* tabEvent：触发事件名</dd>
<dd>* tabStyle：切换方式。可取值："normal" "fade" "move" "move-fade" "move-animate"</dd>
<dd>* direction：移动方向。可取值："left" "top" （tabStyle为"move"或"move-fade" "move-animate"时有效）</dd>
<dd>* aniMethod：动画方法（特殊效果需插件（如：easing）支持，tabStyle为"move-animate"时有效）</dd>
<dd>* aniSpeed：动画速度</dd>
<dd>* onStyle：菜单选中样式名</dd>
</dl>
</div><!--tabbox end-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tabso_yeso.js"></script>
<script type="text/javascript">
$(document).ready(function($){
//上下滑动选项卡切换
$("#move-animate-top").tabso({
cntSelect:"#topcon",
tabEvent:"mouseover",
tabStyle:"move-animate",
direction : "top"
});
//左右滑动选项卡切换
$("#move-animate-left").tabso({
cntSelect:"#leftcon",
tabEvent:"mouseover",
tabStyle:"move-animate",
direction : "left"
});
//淡隐淡现选项卡切换
$("#fadetab").tabso({
cntSelect:"#fadecon",
tabEvent:"mouseover",
tabStyle:"fade"
});
//默认选项卡切换
$("#normaltab").tabso({
cntSelect:"#normalcon",
tabEvent:"mouseover",
tabStyle:"normal"
});
});
</script>
</body>
