关于onMouseOver、onMouseOut、onClick 实现一个效果

代码是这样的 另外我还想实现个功能就是 ONCLICK 点击后 滑动到其他表当前点击的这个颜色是不没的 类似图片上的效果 麻烦各位高人指点一下 最好是帮我修改一下代码 谢谢了 
<html>   
<head>   
<title> 我的一个JS问题 </title>   
<style type="text/css">   
.on{background:#ff0000;}   
.off{background:#cccccc;}   
</style>   <script language="javascript">   
var flag;
function on_over(btnName,myNum){   
for(i=1;i <5;i++){   
document.getElementById(btnName+i).className="off";   
flag=0;
}   
document.getElementById(btnName+myNum).className="on";   
}   
function on_out(btnName,myNum){   
if(flag==0)
{
document.getElementById(btnName+myNum).className="off";   
}
}   
function on_click(btnName,myNum){   for(i=1;i <5;i++){   
document.getElementById(btnName+i).className="off";  
}   
document.getElementById(btnName+myNum).className="on";  
flag=1;  }   
</script>   
</head>   <body>   
<table border=1 align=center>   
<tr> <td width=50 id="tab_1" class="on" onMouseOver="on_over('tab_',1);" onMouseOut="on_out('tab_',1);" onClick="on_click('tab_',1);"> 1 </td> </tr>   
</table>   
<br> <br>   <table border=1 align=center>   
<tr> <td width=50 id="tab_2" class="off" onMouseOver="on_over('tab_',2);" onMouseOut="on_out('tab_',2);" onClick="on_click('tab_',2);"> 2 </td> </tr>   
</table>   
<br> <br>   
<table border=1 align=center>   
<tr> <td width=50 id="tab_3" class="off" onMouseOver="on_over('tab_',3);" onMouseOut="on_out('tab_',3);" onClick="on_click('tab_',3);"> 3 </td> </tr>   
</table>   
<br> <br>   
<table border=1 align=center>   
<tr> <td width=50 id="tab_4" class="off" onMouseOver="on_over('tab_',4);" onMouseOut="on_out('tab_',4);" onClick="on_click('tab_',4);"> 4 </td> </tr>   
</table>   </body>   
</html> 

解决方案 »

  1.   

    已经解决了 贴上去供大家做个参考吧
    <html>   
    <head>   <style type="text/css">   
    .on{background:#ff0000;}   
    .off{background:#cccccc;}
    .onn{ background:#009900;}   
    </style>   <script language="javascript">   
    var flag;
    var green;
    function on_over(btnName,myNum){   
    for(i=1;i <5;i++){ 
    if(i!=green){  
    document.getElementById(btnName+i).className="off";   
    flag=0;
    }
    }
    if(myNum!=green)    
    document.getElementById(btnName+myNum).className="on";   
    }   
    function on_out(btnName,myNum){   
    if(flag==0&&green!=myNum)
    {
    document.getElementById(btnName+myNum).className="off";   
    }
    }   
    function on_click(btnName,myNum){    for(i=1;i <5;i++){   
    document.getElementById(btnName+i).className="off";  
    }   
    document.getElementById(btnName+myNum).className="onn"; 
    green=myNum; 
    flag=1;  }   
    </script>   
    </head>   <body>   
    <table border=1 align=center>   
    <tr> <td width=50 id="tab_1" class="on" onMouseOver="on_over('tab_',1);" onMouseOut="on_out('tab_',1);" onClick="on_click('tab_',1);"> 1 </td> </tr>   
    </table>   
    <br> <br>   <table border=1 align=center>   
    <tr> <td width=50 id="tab_2" class="off" onMouseOver="on_over('tab_',2);" onMouseOut="on_out('tab_',2);" onClick="on_click('tab_',2);"> 2 </td> </tr>   
    </table>   
    <br> <br>   
    <table border=1 align=center>   
    <tr> <td width=50 id="tab_3" class="off" onMouseOver="on_over('tab_',3);" onMouseOut="on_out('tab_',3);" onClick="on_click('tab_',3);"> 3 </td> </tr>   
    </table>   
    <br> <br>   
    <table border=1 align=center>   
    <tr> <td width=50 id="tab_4" class="off" onMouseOver="on_over('tab_',4);" onMouseOut="on_out('tab_',4);" onClick="on_click('tab_',4);"> 4 </td> </tr>   
    </table>   </body>   
    </html>