当前位置:首页 »“秋了秋”个人博客 » 前端编程 » 高亮菜单栏目的通用方法

高亮菜单栏目的通用方法

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

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里