javascript-tab切换效果

要点：

回调函数的使用，可以使函数的适应性更强，更健壮，方便扩展。

效果：

代码：

 1 <style>
 2 .active{
 3     color: #900;
 4     background: #ccc;
 5 }
 6 </style>
 7 <table width="500" border="0" cellspacing="0" cellpadding="0" id="tab" style="text-align:center;">
 8   <tr>
 9     <td class="active">标签一</td>
10     <td>标签二</td>
11     <td>标签三</td>
12     <td>标签四</td>
13   </tr>
14 </table>
15 <table width="500" border="0" cellspacing="0" cellpadding="0" id="con">
16   <tr><td>内容一</td></tr>
17   <tr><td>内容二</td></tr>
18   <tr><td>内容三</td></tr>
19   <tr><td>内容四</td></tr>
20 </table>
21 
22 <script>
23 
24 /*
25     tabs和tabcons是一一对应关系
26     @param tabs   {array} 标签集合
27     @param tabcon {array} 对应切换内容集合
28     @param ev     {event} 切换事件 注：ev in {"mouseover","click",....}
29     @param callFn {function} 回调函数 提高函数的适应性
30 */
31 function tabChange(tabs,tabcons,ev,callFn){
32     for(var i=0,len=tabs.length;i<len;i++){
33         tabs[i].index=i;
34         tabs[i]["on"+(ev||"click")]=function(){
35             for(var i=0,len=tabcons.length;i<len;i++){
36                 tabcons[i].style.display="none";        
37             }
38             tabcons[this.index].style.display="block";    
39             callFn&&callFn.call(this,this.index,this);
40         }    
41     }        
42 }
43 
44 
45 var tabs=document.getElementById("tab").getElementsByTagName("td");
46 var cons=document.getElementById("con").getElementsByTagName("td");
47 
48 
49 tabChange(tabs,cons,"mouseover",function(i,o){
50     for(var k=0,len=tabs.length;k<len;k++){
51         tabs[k].className="";    
52     }
53     o.className="active";
54                                          
55 })
56 
57 </script>

打完收工。

转载于:https://www.cnblogs.com/wengxuesong/archive/2013/05/15/3080399.html