由于工作关系，要做一个用户模块，在做用户导航的时候，用到的Js实现导航菜单的高亮显示。。
\n
如图：
\n
\n
当点帐户管理时，帐户管理高度显示，其他也是这个效果
\n
\n
以前的方法就是用ASP判断，我们现在用另外一种方法:Js判断.
\n
先在导航表格里，做一个图片背景，表格代码如下：
\n
<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>
\n
表格文件中用到的css，代码如下：
\n
.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;}
\n
关键就是在menu.js里，代码如下:
\n
var cUrl=location.href; //取得当前文件名
cUrl=cUrl.toLowerCase(); //转换成小写
//来源：http://www.dwww.cn 作者：无情
\n
var MenuFlag=new Array(“”,”index”,”my_info”,”question”,”answer”,”expert”,”share”,”tech”,”group”,”union”,”forum”);
\n
// 将导航菜单中的页面文件名存入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″;
\n
}
}
\n
好了。。感兴趣的朋友赶快试试吧。
\n