html tab滑动切换,jquery tab选项卡滑动切换渐隐切换-CSDN博客

特效描述：jquery tab选项卡滑动切换渐隐切换。jquery tab选项卡滑动切换渐隐切换

代码结构

1. 引入JS

2. HTML代码

*{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;}

实例1、上下滑动选项卡切换

实例2、左右滑动选项卡切换

实例3、淡隐淡现选项卡切换

实例4、默认选项卡切换

应用说明：

* 应用对象必须为标签按钮的直接父元素，且父元素内不包含其他非按钮元素

* example:

$( ".menus_wrap" ).tabso({

cntSelect:".content_wrap",

tabEvent:"mouseover"

});

* cntSelect：内容块的直接父元素的 jq 选择器

* tabEvent：触发事件名

* tabStyle：切换方式。可取值："normal" "fade" "move" "move-fade" "move-animate"

* direction：移动方向。可取值："left" "top" (tabStyle为"move"或"move-fade" "move-animate"时有效)

* aniMethod：动画方法(特殊效果需插件(如：easing)支持，tabStyle为"move-animate"时有效)

* aniSpeed：动画速度

* onStyle：菜单选中样式名

$(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"

});