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

zhangchunlin_ln 2009-05-02 09:40:35

页面中的导航菜单：

首页--菜单一--菜单二--菜单三--菜单四--菜单五

点击一个链接菜单，比如“菜单二”，如何让“菜单二”高亮显示？不用改变背景颜色，只需要改变字体样式就可以了。这几个菜单是放在一个table里面。

小弟js菜鸟，最好能贴上代码参考。望高手指点，不胜感激！

...全文

326 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

natineprince 2009-05-02

打赏
举报

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

zhangchunlin_ln 2009-05-02

打赏
举报

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

natineprince 2009-05-02

打赏
举报

<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>

xiaojing7 2009-05-02

打赏
举报

[code=HTML]
<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>
[/CODE]

xiaojing7 2009-05-02

打赏
举报

<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>

benjaminwu198818 2009-05-02

打赏
举报

zhangchunlin_ln 2009-05-02

打赏
举报

自己解决了，结贴散分，呵呵

zhangchunlin_ln 2009-05-02

打赏
举报

上面的方法都不能用啊，还有其他什么方法没，应该是个很普遍的问题啊，一般的网站都有这个效果的。

caiying2009 2009-05-02

打赏
举报



<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>