很早的时候个人写了一个tabs效果插件,但是使用起来繁杂，不够简单,于是作了新的改动，现在使用非常的简便。

[caption id=”attachment_189” align=”alignnone” width=”633” caption=”jquery tabs plugin效果图”][/caption]

javascript调用如下:

$(‘.tabswrap-1’).tabs();

html则只需要符合一定的格式带有li标签和div标签即可:

<div class=’tabswrap-1’>
<ul class=’listStyleNo noPadding noRightMargin borderBottom heightL clearfix’>
<li class=’left marginBottomNeg-1 marginRightSS bgWhite displayBlock border noBottomBorder css3_round_topS textDecNone paddingLeft paddingRight itemColorBlack’ href=’#’>Home</li>
<li class=’left marginBottomNeg-1 marginRightSS bgWhite displayBlock css3_round_topS textDecNone paddingLeft paddingRight itemLightGrey itemColorBlack’ href=’#’>Profile</li>
<li class=’left marginBottomNeg-1 bgWhite displayBlock css3_round_topS textDecNone paddingLeft paddingRight itemLightGrey itemColorBlack’ href=’#’>Messages</li>
</ul>

<div class=’c_tabpanel’ id=’tab-0’ >
<h2>this is home detail.</h2>
</div>

<div class=’c_tabpanel hide’ id=’tab-1’ >
<h2>this is Profile detail.</h2>
</div>

<div class=’c_tabpanel hide’ id=’tab-2’ >
<h2>this is Messages detail.</h2>
</div>
</div>

新tabs插件的代码如下:

$.fn.extend({
tabs : function(obj) {
var o = $.extend({
tabSelector:null,
panelSelector:null,
‘event’:”click”,
currentClass:’’,
hoverClass:’’
}, obj || {});
var _this =$(this),
//tab 的钩子
temp_tab = o.tabSelector || ‘li’,
//受控的id开头
temp_panel = o.panelSelector || ‘div’,
tabsize = $(temp_tab).length,
//tab触发事件
tabE = o.event || ‘click’,
//当前tablink的样式类
tabClass = o.currentClass,
//未选中tablink的hover类
hoverClass = o.hoverClass;
_this.children(temp_panel).hide();
$(_this.children(temp_panel)[0]).show();
_this.find(temp_tab).bind(tabE,function(){
if(tabsize>0){
$(temp_tab).removeClass(tabClass).addClass(hoverClass);
$(this).addClass(tabClass).removeClass(hoverClass);
var i = $(this).index();
_this.children(temp_panel).hide();
$(_this.children(temp_panel)[i]).show();
}
});
return _this;
}
});