zblog分类栏目页导航高亮显示

原本导航代码如下

<div class="subnav">    <ul>              <li><a href="http://www.laoyu.wang/?cate=6">阅读时光2</a></li>            <li><a href="http://www.laoyu.wang/?cate=7">阅读时光3</a></li>            <li><a href="http://www.laoyu.wang/?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即可。