学习jquery选项卡插件

(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