javascript-tab切换效果

要点：

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

效果：

代码：

<style>
.active{
    color: #900;
    background: #ccc;
}
</style>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="tab" style="text-align:center;">
  <tr>
    <td class="active">标签一</td>
    <td>标签二</td>
    <td>标签三</td>
    <td>标签四</td>
  </tr>
</table>
<table width="500" border="0" cellspacing="0" cellpadding="0" id="con">
  <tr><td>内容一</td></tr>
  <tr><td>内容二</td></tr>
  <tr><td>内容三</td></tr>
  <tr><td>内容四</td></tr>
</table>

<script>

/*
    tabs和tabcons是一一对应关系
    @param tabs   {array} 标签集合
    @param tabcon {array} 对应切换内容集合
    @param ev     {event} 切换事件 注：ev in {"mouseover","click",....}
    @param callFn {function} 回调函数 提高函数的适应性
*/
function tabChange(tabs,tabcons,ev,callFn){
    for(var i=0,len=tabs.length;i<len;i++){
        tabs[i].index=i;
        tabs[i]["on"+(ev||"click")]=function(){
            for(var i=0,len=tabcons.length;i<len;i++){
                tabcons[i].style.display="none";        
            }
            tabcons[this.index].style.display="block";    
            callFn&&callFn.call(this,this.index,this);
        }    
    }        
}


var tabs=document.getElementById("tab").getElementsByTagName("td");
var cons=document.getElementById("con").getElementsByTagName("td");


tabChange(tabs,cons,"mouseover",function(i,o){
    for(var k=0,len=tabs.length;k<len;k++){
        tabs[k].className="";    
    }
    o.className="active";
                                         
})

</script>

打完收工。