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，来实现事件和函数体的分离，对于传参来说，需要什么就传什么！

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