TAB（选项卡）效果是网页中常见的页面效果 实现它也有N种方式，今天闲来没事我就写了第N+1种 点这里查看DEMO
基于jQuery 的TAB插件 其特色是可以较为自由的设置各种选项，达到自己需要的效果。样式没有好好写，只写了够实现功能的，至于美好就自己去写CSS去美化一下好了。
主要功能：
实现选项卡切换
内置五种切换方式 可以通过参数设置来设定
可以选择触发方式 是点击还是划过
是否自动切换
使用方式：
$(exp).tab({ // 选择要使用tab插件的元素 最好是ID 比如"#testtab"
tabId: "" , // 切换控制器选择符 最好是ID 比如 "#tabcon"
tabTag: "" , // 切换控制器标签 比如 li
conId: "" , // 切换容器ID
conTag: "" , // 切换容器tag
curClass: " cur " , // 标记当前的类名 默认为 cur
act: " click " , // 触发方式 默认为 点击
dft: 0 , // 默认显示第几项 默认为第一项
effact: null , // 效果 默认为无切换效果
auto: false , // 自动切换 默认为不自动切换
autotime: 3000 , // 如果自动切换 自动切换的时间间隔 默认 3 秒
aniSpeed: 500 // 如果运用动画切换效果 动画执行的时间间隔 默认500ms
})DOM 结构：
< div class ="testtab" id ="testtab" > < div id ="tabtag" class ="tabtag" > < ul > < li class ="cur" > 项目一 </ li > < li > 项目二 </ li > < li > 项目三 </ li > < li > 项目四 </ li > </ ul > </ div > < div id ="tabcon" class ="tabcon" > < div > 内容11111
</ div > < div > 内容22222
</ div > < div > 内容3333333
</ div > < div > 内容444444
</ div > </ div > </ div >实例：
$( " #testtab " ).tab({
tabId: " #tabtag " , // 切换控制器的ID
tabTag: " li " , // 切换控制器标签
conId: " #tabcon " , // 内容容器ID
conTag: " div " , // 容器标签
act: " click " , // 点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过
effact: " scrolly " // 效果为纵向滚动
})插件代码：
Code
function cur(ele,currentClass,tag){ //标记当前函数 ele= $(ele)? $(ele):ele;
if(!tag){
ele.addClass(currentClass).siblings().removeClass(currentClass);
}else{
ele.addClass(currentClass).siblings(tag).removeClass(currentClass);
}
}
$.fn.tab=function(options){ //插件开始 var org={ //原始设置 tabId: "",
tabTag: "",
conId: "",
conTag: "",
curClass: "cur",
act: "click",
dft: 0,
effact: null,
auto: false,
autotime: 3000,
aniSpeed: 500 }
$.extend(org,options); //合并自定义设置
var t=false; //自动开始定时器 var k=0; //切换序列 默认为0 var _this=$(this); //取得当前元素 var tagwrp=$(org.tabId); //切换控制器容器 var cnotallow=$(org.conId); //切换控制器标签 var tag=tagwrp.find(org.tabTag); //切换容器的容器 var cnotallow=conwrp.find(org.conTag); //切换内容的容器 var len=tag.length; //有多少个项目 var taght=parseInt(tagwrp.css("height")); //得到控制器高度 var cnotallow=conwrp.get(0).offsetWidth; //得到控制器宽度 var cnotallow=conwrp.get(0).offsetHeight; //以及高度 var curtag=tag.eq(org.dft); //初始控制器标签 //初始化tab cur(curtag,org.curClass); //标记默认序列 con.eq(org.dft).show().siblings(org.conTag).hide(); //显示默认项目
if(org.effact=="scrollx"){ //如果使用 横向滚动 则准备CSS 条件 var padding=parseInt(con.css("padding-left"))+parseInt(con.css("padding-right"));
_this.css({
"position" :"relative",
"height" :taght+conht+"px",
"overflow" :"hidden"
});
conwrp.css({
"width" :len*conwh+"px",
"height" :conht+"px",
"position" :"absolute",
"top" :taght+"px" });
con.css({
"float" :"left",
"width" :conwh-padding+"px",
"display" :"block" });
}
if(org.effact=="scrolly"){ //如果使用 纵向滚动 则准备CSS 条件 var padding=parseInt(con.css("padding-top"))+parseInt(con.css("padding-bottom"));
_this.css({
"position" :"relative",
"height" :taght+conht+"px",
"overflow" :"hidden"
});
tagwrp.css({
"z-index" :100 })
conwrp.css({
"width" :"100%",
"height" :len*conht+"px",
"position" :"absolute",
"z-index" :99
})
con.css({
"height" :conht-padding+"px",
"float" :"none",
"display" :"block" });
}
tag.css({"cursor":"pointer"}) //切换控制标签用手性鼠标 .each(function(i){ //循环切换 tag.eq(i).bind(org.act,function(){ //绑定到鼠标动作 cur(this,org.curClass); //标记当前 k=i; //传递序列 switch(org.effact){ //根据设定的切换效果去转换切换方式 case "slow" : con.eq(i).show("slow").siblings(org.conTag).hide("slow"); //slow 效果 break;
case "fast" : con.eq(i).show("fast").siblings(org.conTag).hide("fast"); //fast 效果 break;
case "scrollx" : conwrp.animate({left:-i*conwh+"px"},org.aniSpeed); //横向滚动效果 break;
case "scrolly" : conwrp.animate({top:-i*conht+taght+"px"},org.aniSpeed); //纵向滚动效果 break;
default : con.eq(i).show().siblings(org.conTag).hide(); //默认切换 break;
//End of switch }
}
)
})
if(org.auto){ //自动切换 var drive=function(){
if(org.act=="mouseover"){
tag.eq(k).mouseover();
}else if(org.act=="click"){
tag.eq(k).click();
}
k++;
if(k==len) k=0;
}
t=setInterval(drive,org.autotime);
}
//End of $.fn.tab本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
