当前位置: 秋叶网络博客 前端编程 ◊ 高亮菜单栏目的通用方法

高亮菜单栏目的通用方法

作者:秋了秋 发表时间: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://www.mizuiren.com/360.html
目录: 前端编程 | 标签: 高亮菜单 | 5146次阅读