求一个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的了及单无格复原……
[解决办法]
<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>
<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>
