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>