标签：
在写插件之前我们需要引用一个jquery库
html代码如下：
<div class="ina_tab"> <ul><li>1</li><li>2</li><li>3</li></ul> <div class="ina_nr">11</div> <div class="ina_nr">22</div> <div class="ina_nr">33</div> </div>
css如下：
.ina_tab{ width:300px; height:200px; background:#ddd; float:left; margin:20px;}
.ina_tab ul{ width:100%; float:left; background:#aaa; list-style:none; height:30px; line-height:30px;}
.ina_tab ul li{ width:100px; float:left; text-align:center;}
.ina_tab ul li.ina_dq{ background:#f00; color:#fff;}
.ina_tab .ina_nr{ display:none; text-align:center; line-height:150px; font-size:40px; font-family:"微软雅黑"; color:#666;}
jq插件代码如下
$.fn.extend({
//切换代码
INA_tab:function(opt,callback){
if(!opt){}
var _this=$(this),ina_click=opt.click||"click",daohang=_this.find(opt.daohang||"li"),nr=_this.find(opt.nr||".ina_nr"),cur=opt.cur||"ina_dq";
daohang.eq(0).addClass(cur);
nr.eq(0).show();
daohang.on(ina_click,function(){
daohang.removeClass(cur).eq(daohang.index(this)).addClass(cur);
nr.hide().eq(daohang.index(this)).show();
})
}
})
调用方法如下：
$(".ina_tab").INA_tab({
daohang:"li", //切换导航条，默认元素为li
nr:".ina_nr", //切换框，默认class为ina_nr
click:"mouseover", //切换方式click||mouseover，默认方式为click
cur:"ina_dq" //切换按钮当前样式，默认为ina_dq
})
标签：
原文地址：http://www.cnblogs.com/caiming/p/4546232.html
