经常在很多网站上看到，当前正在访问的导航栏采用了高亮显示效果，能清楚地指明当前正在访问的页面栏目，比如百度首页效果。这个效果也必须采用JS和CSS结合才能实现，下面我说一下具体实现方法，本方法已经运行通过。
第一步：先在<head></head>中定义一个高亮显示的样式，具体样式属性根据需要设定：
<style type="text/css">
<!--
#navigation a.here:link,
#navigation a.here:visited,
#navigation a.here:hover,
#navigation a.here:active {
font-family: "黑体";
font-size: 14px;
line-height: 20px;
color: #f4c100;
text-decoration: none;
letter-spacing: 0px;
display: block;
}
-->
</style>
第二步：将<body>中导航栏显示部分的表格命名为id="navigation"，比如某个导航栏如下，注意红色部分：
<table id="navigation" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td height="28" align="center" valign="middle"><table width="923" border="0">
<tr>
<td width="274"> </td>
<td width="639"><table width="649" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="42" height="28"><p align="center"><a href="index.asp" class="nllj">首 页</a> </p></td>
<td width="56"><div align="center"><a href="About.asp" class="nllj">关于我们</a></div></td>
<td width="56"><div align="center"><span><a href="Server.asp" class="nllj">服务流程</a></span></div></td>
<td width="56"><div align="center"><span class="STYLE3"><a href="Pinpai.asp" class="nllj">品牌形象</a></span></div></td>
<td width="56"><div align="center"><span class="STYLE3"><a href="PingmianAd.asp" class="nllj">平面广告</a></span></div></td>
<td width="56"><div align="center" class="STYLE3"><a href="Logo.asp" class="nllj">标志设计</a></div></td>
<td width="56"><div align="center" class="STYLE3"><a href="View.asp" class="nllj">导视系统</a></div></td>
<td width="56"><div align="center" class="STYLE3"><a href="Meeting.asp" class="nllj">会议活动</a></div></td>
<td width="56"><div align="center" class="STYLE3"><a href="Pack.asp" class="nllj">产品包装</a></div></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
第三步：在网页中添加JS实现代码，放在任意位置都可以，代码如下：
<script language="javascript">
function highlightPage(){ //这个函数作用是判断当前点击的URL，以便高亮显示相应的导航栏
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("navigation")) return false;
var nav=document.getElementById("navigation");
var links=nav.getElementsByTagName("a");
for(var i=0; i<links.length; i++) {
var linkurl=links[i].getAttribute("href");
var currenturl=window.location.href;
if (currenturl.indexOf(linkurl)!=-1) {
links[i].className="here";
var linktext=links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
window.onload=highlightPage; //执行上面的函数
</script>
好了，OK，保存执行一下吧，高亮显示效果就出来了。
