zblog分类栏目页导航高亮显示
原本导航代码如下
<div class="subnav"> <ul> <li><a href="http://www.zblog.cm/?cate=6">阅读时光2</a></li> <li><a href="http://www.zblog.cm/?cate=7">阅读时光3</a></li> <li><a href="http://www.zblog.cm/?cate=8">阅读时光4</a></li> </ul> </div>
让我们通过js来实现
//页面高亮 $(document).ready(function(){ var s=document.location; $(".subnav a").each(function(){ if(this.href==s.toString().split("#")[0]){$(this).addClass("current-menu-item");return false;} }); });
这样就给当前链接添加了current-menu-item类,然后去css文件里写样式。
原理说明:
1、通过js获取浏览器上的url地址。
2、通过js找到导航链接的a标签组,通过each进行循环。
3、在循环的过程中用第一步获取到的地址进行比较,两者一直就通过addClass给该地址添加css的类标签
4、书写css即可。