网页导航菜单高亮显示问题（急）

Question

页面中的导航菜单： 首页--菜单一--菜单二--菜单三--菜单四--菜单五 点击一个链接菜单，比如“菜单二”，如何让“菜单二”高亮显示？不用改变背景颜色，只需要改变字体样式就可以了。这几个菜单是放在一个table里面。 小弟js菜鸟，最好能贴上代码参考。望高手指点，不胜感激！ 

Answer 1

<table style="background:blue;">
<tr>
<td>首页--</td>
<td>菜单一 ---</td>
<td>菜单二--- </td>
<td>菜单三 ----</td>
<td>菜单四 ---</td>
<td>菜单五 </td>
</tr>
</table><script>
var obj=document.getElementsByTagName("td");
for(var i=0;i<obj.length;i++){
obj[i].onmouseover=function(i){
return function(){
obj[i].background="red";
};
}(i);
}
</script>

Answer 2

<table style="background:blue;">
<tr>
<td>首页--</td>
<td>菜单一 ---</td>
<td>菜单二--- </td>
<td>菜单三 ----</td>
<td>菜单四 ---</td>
<td>菜单五 </td>
</tr>
</table><script>
var obj=document.getElementsByTagName("td");
for(var i=0;i<obj.length;i++){
obj[i].onmouseover=function(i){
return function(){
obj[i].style.background="red";
};
}(i);
obj[i].onmouseout=function(i){
return function(){
obj[i].style.background="blue";
};
}(i);
}
</script>

Answer 3

<table style="background:blue;">
<tr>
    <td>首页--</td>
    <td>菜单一 ---</td>
    <td>菜单二--- </td>
    <td>菜单三 ----</td>
    <td>菜单四 ---</td>
    <td>菜单五 </td>
</tr>
</table><script>
var obj=document.getElementsByTagName("td");
for(var i=0;i<obj.length;i++){
    obj[i].onmouseover=function(i){
        return function(){
            obj[i].className="highlight";
            };
    }(i);
    obj[i].onmouseout=function(i){
        return function(){
            obj[i].className="normal";
            };
    }(i);
}
</script><style>
.highlight{font:宋体}
.normal{font:幼圆}
</style>

Answer 4

这几种方法我已经试过了，效果只能是单个的文字改变样式，如果<td>里面有<a>标签的话就没效果了。
还有就是不是鼠标移近移出改变链接字体的样式。是进入相应的页面对应的导航链接菜单改变样式。

Answer 5

进入相应页面.没用框架的话直接定样式不就好了...
用了框架就把上面的事件改成WINDOW.ONLOAD
里面有链接的话.OBJ里面拿到A的对象把他的样式也改了不就行了?

Answer 6

呵呵  其实我就是不知道怎么从obj里面拿到a的对象，js不怎么熟，高手请指教。

Answer 7

<style>
.red A:link,.red A:visited,.red A:active{color:red}
</style><table id=menu>
<tr>
    <td class="red"> <a href="index.htm"> 首页 </a> </td>
    <td> <a href="index1.htm"> 菜单一 </a> </td>
    <td> <a href="index2.htm"> 菜单二 </a> </td>
    <td> <a href="index3.htm"> 菜单三 </a> </td>
    <td> <a href="index4.htm"> 菜单四 </a> </td>
    <td> <a href="index5.htm"> 菜单五 </a> </td>
</tr>
</table><script language="javascript"> 
<!-- 导航菜单-自动对应样式
onload=function(){ 
    var sa=location.href;
    var obj=document.getElementById("menu").getElementsByTagName("td"),j=obj.length 
    for (var i=0;i <j;i++) 
        if (sa.indexOf(obj[i].getElementsByTagName("a")[0].href)!=-1)obj[i].className="red" 
        else obj[i].className="" 
} 
//--> 
</script> 
分别保存为："index1.htm""index2.htm""index3.htm""index4.htm""index5.htm"