Tab切换效果(多个参数)

Posted 2020-07-25 元仔

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

 

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

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

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