代码如下:
"http://www.w3.org/TR/html4/loose.dtd">
选项卡插件制作 (function($){
$.fn.extend({
myTab:function(options){
var confings={
tabNav:'',//tab导航名称
tabTag:'',//tab导航标签
tabCon:'',//tab内容名称
conTag:'',//tab内容标签和其他的类名
method: 'click'//鼠标事件状态
};//默认设置
options= $.extend(confings,options);
var that=$(this);
var tagnav=$(confings.tabNav);
var tabLi=tagnav.find(confings.tabTag);
var tabcon=$(confings.tabCon);
var tabUl=tabcon.find(confings.conTag);
var timoutid=null;
tabLi.each(function(ind){
$(this).bind(options.method,function(){
var liNode = $(this);
timoutid = setTimeout(function(){ //鼠标不小心划过的延迟时间
tabUl.hide();
tabLi.removeClass("cur");
tabUl.eq(ind).show();
liNode.addClass("cur");
},300);
}).mouseout(function(){
clearTimeout(timoutid);
});
})
return this;
}
})
})(jQuery);
$(function(){
$("#testtab5").myTab({
tabNav:"#tabtag5",tabTag:"li",tabCon:"#tabcon5",conTag:".tabcontent",method:"mouseover"
});
$("#testtab").myTab({
tabNav:"#tabtag",tabTag:"li",tabCon:"#tabcon",conTag:".tabcontent"
});
})
菜单一 菜单二 菜单三 内容一
内容二
内容三
菜单一 菜单二 菜单三 内容一
内容二
内容三
