高亮菜单栏目的通用方法
作者：秋了秋 发表时间：2015年07月01日
高亮菜单栏目在网站开发中几乎是不可能不会用到，包括很多开源程序也要用到，连dedecms都专门做了currentstyle这个标签属性。所谓高亮，就是点击相应菜单后使得该菜单得以聚焦的效果，明确页面路径，让访客能很清楚知道自己所处的页面归属于哪个栏目。然而让后端实现的话非常困难，非常麻烦，需要判断各个页面的id以及匹配id等等，况且方法不通用，在dede中的标签方法在wp中就不适用，也不鼓励用标签方法实现。但是前端的话只需要一段js，放哪里哪都适用。废话不多说，直接上代码：
<script type="text/javascript" language="javascript">
var nav = document.getElementById("sidebar");//换成自己的
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 = "active";//高亮样式class，换成自己的
</script>
实现原理：判断当前页面的url以及a标签的url，如果一致则让相应的a便签的上级元素加上一个class，即高亮的样式，css高亮样式自己写。还不试试，百试百灵哦。
0
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/360.html