标签：
前几天我写了这个切换效果，但是是只传一个值的函数，经过各位大牛的指点发现还是有些问题的，于是经过我不懈的努力，完善了代码：
传递多个参数替代函数里面包含事件这个问题：
html代码：
1 <div class="content"> 2 <div class="tab1 cf"> 3 <ul> 4 <li class="tab_li">第一项</li> 5 <li class="tab_li">第二项</li> 6 <li class="tab_li">第三项</li> 7 </ul> 8 </div> 9 <div class="tab2 cf"> 10 <div class="tab2_div">1111第一项内容</div> 11 <div class="tab2_div">2222第二项内容</div> 12 <div class="tab2_div">3333第三项内容</div> 13 </div> 14 </div>
css代码：
1 .tab1 li{ 2 float: left; 3 width: 98px; 4 border:1px solid #f00; 5 display: inline-block; 6 height: 50px; 7 8 } 9 .tab2 div{ 10 display: none; 11 border:1px solid #f00; 12 width: 300px; 13 height: 100px; 14 15 } 16 .tab1 .tab_li:first-child{ 17 background:#FABB3E; 18 } 19 .tab2 .tab2_div:first-child{ 20 display: inline-block; 21 }
jquery代码：
1 function tabSwitch(tab,index){ //多参函数 2 var tabBox=tab; 3 var tab1Li=tabBox.find(".tab1 .tab_li"); 4 var tab2Div=tabBox.find(".tab2 .tab2_div"); 5 tab1Li.eq(index).css("background","#FABB3E").siblings().css("background","#fff"); 6 tab2Div.eq(index).show().siblings().hide(); 7 }
调用：
$(".content").find(".tab1 .tab_li").on("click",function(){
tabSwitch($(".content"),$(this).index());
});
这里传了两个值，tab和index，来实现事件和函数体的分离，对于传参来说，需要什么就传什么！
好了~~~你和我一起进步了吗？^_^
标签：
原文地址：http://www.cnblogs.com/daisyyuan/p/5587668.html
