Js实例：实现导航菜单的高亮显示

由于工作关系，要做一个用户模块，在做用户导航的时候，用到的Js实现导航菜单的高亮显示。。

如图：



当点帐户管理时，帐户管理高度显示，其他也是这个效果



以前的方法就是用ASP判断，我们现在用另外一种方法:Js判断.

先在导航表格里，做一个图片背景，表格代码如下：

<table width="780" border="0" cellspacing="0" cellpadding="0">

<tr>

<td width="6"><img src="Images/bg_menuleft.gif" width="6" height="36"></td>

<td class="MemberMenu"> <a href="/">网站首页</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="/Member/index.asp" id="TopMenu1">我的后台</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="my_info.asp" id="TopMenu2">帐户管理</a><img src="Images/bg_menufg.gif"
align="absmiddle"><a href="my_question_list.asp" id="TopMenu3">悬赏项目</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="my_answer_list.asp" id="TopMenu4">问答</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="my_expert_reg.asp" id="TopMenu5">专家</a><img
src="Images/bg_menufg.gif" align="absmiddle"><a href="my_share_list.asp" id="TopMenu6">共享</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="my_tech_list.asp" id="TopMenu7">文章</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="my_group_list.asp"
id="TopMenu8">群组</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href='my_message_list.asp'>短信</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href='my_friend_list.asp'>好友</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href=''>访问统计</a><img
src="Images/bg_menufg.gif" align="absmiddle"><a href="my_union_list.asp" id="TopMenu9">联盟</a><img src="Images/bg_menufg.gif" align="absmiddle"><a href="my_forum_list.asp" id="TopMenu10">我的论坛</a></td>

<td width="8"><img src="Images/bg_menuright.gif" width="8" height="36"></td>

</tr>

</table><script src="Menu.js"></script>

表格文件中用到的css，代码如下：

.MemberMenu{background:url(bg_menumid.gif)}

.MemberMenu a{padding:0 5 0 6;height:22px;line-height:22px;}

.MemberMenu a:link{font-weight:bold;color:#FFF;text-decoration: none;}

.MemberMenu a:visited{font-weight:bold;color:#FFF;text-decoration: none;}

.MemberMenu a:hover{font-weight:bold;color:#2B5CB9;background:#FFF;}

关键就是在menu.js里，代码如下:

var cUrl=location.href; //取得当前文件名

cUrl=cUrl.toLowerCase(); //转换成小写

//来源： 作者：无情

var MenuFlag=new Array("","index","my_info","question","answer","expert","share","tech","group","union","forum");

// 将导航菜单中的页面文件名存入arr数组

for (var Menui=1;Menui<=10 ;Menui++ )

{

if (cUrl.indexOf(MenuFlag[Menui])>0) //判断当前页面是否存在数组中

{

document.getElementById("TopMenu"+Menui).style.background="#FFF";

document.getElementById("TopMenu"+Menui).style.color="#2A5CB9";

}

}

好了。。感兴趣的朋友赶快试试吧。