您的位置:首页 > Web前端 > JQuery

学习jquery选项卡插件

2012-05-15 10:57 232 查看
(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'});
})
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: