要点：
回调函数的使用，可以使函数的适应性更强，更健壮，方便扩展。
效果：
代码：
1 <style> 2 .active{3color: #900; 4background: #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 /*25tabs和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){32for(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){50for(var k=0,len=tabs.length;k<len;k++){51 tabs[k].className=""; 52}53o.className="active";54 55 })56 57 </script>
打完收工。
