(function($){
$.fn.tabPlugins=function(options){
var seting={
event:"mouseover", //事件
LiClass:"liclass", //li的樣式設置
HideClass:"hideclass"//切換隱藏內容
};
options=$.extend(seting,options);
var seft=$(this),
tabBox=seft.children("div.tab_box").children("div"),
menu=seft.children("ul.tab_menu"),
items=menu.find("li");
var tabHands=function(elem){
? elem.siblings('li').removeClass(options.LiClass).end().addClass(options.LiClass);
?tabBox.siblings('div').addClass(options.HideClass).end().eq(elem.index()).removeClass(options.HideClass);

},
delay=function(elem,time){
time?setTimeout(function(){tabHands(elem);},time):tabHands(elem); //時間的設置
};
items.bind(options.event,function(){
delay( $(this) );
});
}

})(jQuery);
$(function(){
/*例如<div class="demo1">
?<ul class="tab_menu">
?? <li class="current"></li>
?? <li></li>
?? <li></li>
?</ul>
?<div class="tab_box">
?? <div class="hide"></div>
?? <div class="hide"></div>
?? <div class="hide"></div>
?</div>
</div>*/
$('.demo1').tabPlugins({event:'click',LiClass:'current',HideClass:'hide'});
})

轉載于:https://www.cnblogs.com/hxh-hua/archive/2012/05/15/2501134.html

總結

以上是生活随笔為你收集整理的学习jquery选项卡插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。