Js实现当前导航菜单高亮显示

HTML结构

<div id="navmenu">
 <ul id="nav">
 <li><a href="index.html">主页</a></li>
 <li><a href="column.html">栏目</a></li>
 <li><a href="zch.html">栏目</a></li>
 </ul>
</div>

JS代码

<script type="text/javascript" language="javascript">
var nav = document.getElementById("nav");
var links = nav.getElementsByTagName("li");
var lilen = nav.getElementsByTagName("a");
var currenturl = document.location.href;
var last = 0;
for (var i=0;i<links.length;i++)
{
var linkurl = lilen[i].getAttribute("href");
if(currenturl.indexOf(linkurl)!=-1)
{
last = i;
}
}
links[last].className = "current";
</script>

注意事项：

该方法通过对比当前页面的URL和菜单的URL来判定该高亮显示哪个菜单。使用也很简单，只需要在页面的</body>标签前添加下面这段JS即可，注意这段代码需要加到菜单的源代码之后，否则不能生效。

测试的时候要多见几个页面，像这样：





 

转载自：http://www.nealjin.com/highlight-menu/