编写选项卡插件
html:
<div id="tab">
<div class="tab-tit">
<a href="javascript:void(0)" class="current">one</a>
<a href="javascript:void(0)">two</a>
<a href="javascript:void(0)">three</a>
</div>
<div class="tab-con">
<div class="tab-item" style="display:block;">11111111111111111111</div>
<div class="tab-item">22222222222222222222</div>
<div class="tab-item">33333333333333333333</div>
</div>
</div>
css:
body,html,div,p,span{margin:0; padding:0; list-style:none; font-size:12px;}
a:link{ color:#000; text-decoration:none;}
a:hover{ text-decoration:underline;}
.tab-tit a{ padding:5px 10px; background:pink;}
.tab-tit a.current{ background:yellow; color:#f60; text-decoration:underline;}
.tab-tit a.bg{ background:green; color:#fff;}
.tab-item{ display:none;}
js:
首先：插件的固定框架：
(function($){
$.fn.name=function(options){
//设置参数 ，属性等。
var options=$.extend({defaults,options});
this.each(function(){
//实现效果的代码
})
}
})(jQuery)
好啦，下面开始 填充 剩下的部分：
(function($){
$.fn.tab=function(options){
var defaults={
currentClass:"current",
active:"mouseover"
}
var options=$.extend(defaults,options);
this.each(function(){
var otab=$(this),tit=$(".tab-tit a",otab),item=$(".tab-item",otab);
tit.on(options.active,function(){ /*当前选项卡的标题上绑定事件*/
$(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
item.eq($(this).index()).show().siblings().hide();
})
})
}
})(jQuery)
插件编写好了，最后，在这个选项卡的父级上，运用写好的这个插件：
$("#tab").tab() /*这样，默认的就是鼠标经过就切换*/
$("#tab").tab({/*也可以对设置的参数进行修改，达到你想要的效果*/
active:"click"
})
