漂亮的jQuery tab选项卡插件

来源:转载

tab选项卡在实际应用中几乎到处可见,像现在大型网站163,QQ,新浪,淘宝都使用了tab选项卡效果,下面我来介绍一款jQuery tab选项卡插件.

jQuery tab插件 结构:

 代码如下 复制代码

<div class="tabWrap">  

<ul class="tabBox">  

<li><a href="#nogo">tab1 </a></li>  

<li><a href="#nogo">tab2 </a></li>  

<li><a href="#nogo">tab3 </a></li>  

<li><a href="#nogo">tab4 </a></li>  

<li><a href="#nogo">tab5 </a></li>  

</ul>  

<div class="tabContent">  

<div class="tcon">1111</div>  

<div class="tcon">2222</div>  

<div class="tcon">3333</div>   <div class="tcon">4444</div>  
<div class="tcon">5555</div>  
</div>  
</div> 

jQuery tab插件 插件代码:

 代码如下 复制代码

$(function () {  
$.fn.tabs = function (options) {  
var settings = {  
tabList: "",  
tabContent: "",  
tabOn:"",  
action: "" 
};  
var _this = $(this);  
if (options) $.extend(settings, options);  
_this.find(settings.tabContent).eq(0).show(); //第一栏目显示  
_this.find(settings.tabList).eq(0).addClass(settings.tabOn);  
if (settings.action == "mouseover") {  
_this.find(settings.tabList).each(function (i) {  
$(this).mouseover(function () {  
$(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn);  
var _tCon = _this.find(settings.tabContent).eq(i);  
_tCon.show().siblings().hide();  
}); //滑过切换  
});  
}  
else if (settings.action == "click") {  
_this.find(settings.tabList).each(function (i) {  
$(this).click(function () {  
$(this).addClass(settings.tabOn).siblings().removeClass(settings.tabOn);  
var _tCon = _this.find(settings.tabContent).eq(i);  
_tCon.show().siblings().hide();  
}); //点击切换  
});  
};  
};  
//调用方式:  
$(".tabWrap").tabs({  
tabList: ".tabBox li",  //tab list  
tabContent: ".tabContent .tcon", //内容box  
tabOn:"on", //当前tab类名  
action: "mouseover" //事件,mouseover或者click  
});  
});

小提示

本文章未提供jquery库文件,大家可到官方下载最新版本的。




分享给朋友:
您可能感兴趣的文章:
随机阅读: