个人tab切换jq效果插件写法

在写插件之前我们需要引用一个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

         })