求一个JS代码，关于点击单元格和文字同时变化的问题

<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#006633">
    <td><a href="1.asp">菜单1</a></td>
    <td><a href="2.asp">菜单2</a></td>
    <td><a href="3.asp">菜单3</a></td>
    <td><a href="4.asp">菜单4</a></td>
    <td><a href="5.asp">菜单5</a></td>
  </tr>
</table>
我想做到，当我把鼠标移到菜单1的单元格上面，该单元格背景变色（红），同时“菜单1”几个字也变颜色（白）。当点击之后，单元格变红，字变白。
移到菜单2时，菜单1的了及单无格复原……

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script type="text/javascript">
window.onload = function(){
    var table = document.getElementById('table');
    var links = table.getElementsByTagName('a');
    for(var i = 0 ; i < links.length ; ++i){
        links[i].onmouseover = function(){
            this.style.color = '#FFFFFF';
            getParent(this).style.backgroundColor='#FF0000';
        }
        links[i].onmouseout = function(){
            this.style.color = '';
            getParent(this).style.backgroundColor='';
        }
    }}
function getParent(note){
    var parent = note.parentNode;
    if(parent.nodeType==1){
        return parent;
    }else{
        return getParent(parent);
    }
}
</script>
<table id="table" width="250" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#006633">
    <td><a href="javascript:void(0);">菜单1</a></td>
    <td><a href="javascript:void(0);">菜单2</a></td>
    <td><a href="javascript:void(0);">菜单3</a></td>
    <td><a href="javascript:void(0);">菜单4</a></td>
    <td><a href="javascript:void(0);">菜单5</a></td>
  </tr>
</table>
<style type="text/css">
.a{background-color:red;color:#FFFFFF}
.b{background-color:red;}
.c{color:#FFFFFF}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("table tr td").hover(function(){
if(!$(this).hasClass("b")){
$(this).addClass("a");
}
},function(){
if(!$(this).hasClass("b")){
$(this).removeClass();
}
});
$("table tr td a").click(function(){
$("a").removeClass().parents("td").removeClass();
$(this).addClass("c").parents('td').addClass("b");
});
})
</script>
<table width="250" border="0" cellspacing="0" cellpadding="0">
   <tr bgcolor="#006633">
     <td><a href="#">菜单1</a></td>
     <td><a href="#">菜单2</a></td>
     <td><a href="#">菜单3</a></td>
     <td><a href="#">菜单4</a></td>
     <td><a href="#">菜单5</a></td>
   </tr>
</table>
使用 jquery吧，
   $(function(){
        $("table tr td").hover(function(){
            if(!$(this).hasClass("b")){
                $(this).addClass("a");
            }
        },function(){
            if(!$(this).hasClass("b")){
                $(this).removeClass();
            }
        });
        $("table tr td a").click(function(){
            $("a").removeClass().parents("td").removeClass();
            $(this).addClass("c").parents('td').addClass("b");
        });
    })
<HEAD>
  <TITLE> menu </TITLE>
  <style>
.menu {width:50px; font-size:14px; text-align:center; background-color:#006633; color:yellow; cursor:pointer}
.menu_hover {width:50px; font-size:14px; text-align:center; background-color:darkorange; color:white; cursor:pointer}
.menu_on {width:50px; font-size:14px; text-align:center; background-color:red; color:white; cursor:pointer;}
  </style>
</HEAD>
<BODY>
  <table id="tab" width="250" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#006633">
    <th onclick="fun(this,'http://www.baidu.com')">菜单1</a></th>
    <th onclick="fun(this,'http://www.taobao.com')">菜单2</a></th>
    <th onclick="fun(this,'http://www.jd.com')">菜单3</a></th>
    <th onclick="fun(this,'http://www.163.com')">菜单4</a></th>
    <th onclick="fun(this,'http://www.csdn.net')">菜单5</a></th>
  </tr>
  <tr>
<td colspan="5"><iframe id="ifr"></iframe></td>
  </tr>
</table><SCRIPT LANGUAGE="JavaScript">
window.onload = function(){
var menus = document.getElementsByTagName("th");
for (var i=0; i<menus.length; i++) {
menus[i].className = "menu";
menus[i].onmouseover= function(){ if(this.className!='menu_on') this.className = 'menu_hover'; }
menus[i].onmouseout= function(){ if(this.className!='menu_on') this.className = 'menu'; }
}
}
function fun(obj, url){
//清除原来选中的菜单样式
for (var i=0; i<obj.parentNode.childNodes.length; i++) {
obj.parentNode.childNodes[i].className = "menu";
}
//设置当前选中的菜单样式
obj.className = "menu_on";
//页面跳转或其他操作
document.getElementById("ifr").src = url;
}
</SCRIPT>