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即可。