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库文件，大家可到官方下载最新版本的。
