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/