Tab切换效果（修改）

　　前几天我写了这个切换效果，但是是只传一个值的函数，经过各位大牛的指点发现还是有些问题的，于是经过我不懈的努力，完善了代码：

传递多个参数替代函数里面包含事件这个问题：

html代码：

 <div class="content">

     <div class="tab1 cf">

         <ul>

             <li class="tab_li">第一项</li>

             <li class="tab_li">第二项</li>

             <li class="tab_li">第三项</li>

         </ul>

     </div>

     <div class="tab2 cf">

         <div class="tab2_div">1111第一项内容</div>

         <div class="tab2_div">2222第二项内容</div>

         <div class="tab2_div">3333第三项内容</div>

     </div>

 </div>

css代码：

 .tab1 .tab_li{

         float: left;

         width: 98px;

         border:1px solid #f00;

         display: inline-block;

         height: 50px;

     }

     .tab2 .tab2_div{

         display: none;

         border:1px solid #f00;

         width: 300px;

         height: 100px;

     }
　　　　.tab1 .active{
　　　　　　background:#FABB3E;
　　　　}

     .tab1 .tab_li:first-child{

         background:#FABB3E;

     }

     .tab2 .tab2_div:first-child{

         display: inline-block;

     }

jquery代码：

     function tabSwitch(tab,index){         //多参函数

         var tabBox=tab;

         var tab1Li=tabBox.find(".tab1 .tab_li");

         var tab2Div=tabBox.find(".tab2 .tab2_div");

         tab1Li.eq(index).addClass("active").siblings().removeClass("active");

         tab2Div.eq(index).show().siblings().hide();

     }

调用：

    $(".content").find(".tab1 .tab_li").on("click",function(){

    　　tabSwitch($(".content"),$(this).index());

    });

这里传了两个值，tab和index，来实现事件和函数体的分离，对于传参来说，需要什么就传什么！

好了~~~你和我一起进步了吗？^_^

巴特西

Tab切换效果（修改）

最新文章

热门文章