漂亮的jQuery tab选项卡插件

清远大学城网（http://www.qydxc.com）

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   
});   
});
 

 

转载于:https://www.cnblogs.com/wenson/p/3322420.html