在写插件之前我们需要引用一个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 })
时间: 2024-10-08 00:06:36