欢迎您光临本站,如有问题请及时联系我们。

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

后台-系统设置-扩展变量-手机广告位-内容正文顶部

为了让访问者清楚明了的知道自己的当前位置,一个很好的办法就是突出访问者当前所在栏目的菜单条目,也就是我们常说的当前导航菜单高亮显示;实现这个表现样式的方法很多,针对各种情况可以使用相应的手段来实现。最简单、也是最常用的就是通过CSS来实现,所需要的是在菜单里添加一个辅助样式,所以这种方法有一定的局限性。

我们常常会遇到一种情况就是,我们没法在原来菜单上来添加辅助性的样式,这样一来,我们就难以实现当前导航菜单高亮显示的效果;比如下面这个菜单:

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

该方法不用去改菜单条目添加辅助样式,通过对比当前页面的URL和菜单的URL来判定该高亮显示哪个菜单。使用也很简单,只需要在页面的</body>标签前添加下面这段JS即可,注意这段代码需要加到菜单的源代码之后,否则不能生效。 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>

如果处在栏目页,查看源码后会发现导航部分的代码为:

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

转载请注明:昆山SEO服务,专注企业网络营销-李麟 » Js实现当前导航菜单高亮显示

来源:BD营销平台,欢迎分享本文,转载请保留出处和链接!
后台-系统设置-扩展变量-手机广告位-内容正文底部