天兴工作室

之前给大家介绍过zblogasp版的“ zblog让导航突出显示当前页链接栏目”，zblogphp版的不太一样，给大家介绍下我的想法。

还是借鉴了zbp的“metro”主题，谢谢主题作者新鲜人，这个方法是用js来判断当前页然后加上一个css。具体做法如下：

先加上一段js代码，js代码可以加在模板文件里面，也可以加在模板调用的外部js文件里面，代码如下：

$(document).ready(function(){ 
    var s=document.location;
    $("#nav a").each(function(){
        if(this.href==s.toString().split("#")[0]){$(this).addClass("on");return false;}
    });
});

注意要修改#nav a这部分，修改#nav为你自己导航的id属性。

然后在css文件里面新增一句：

#nav ul li a.on{background:#ff6f3d;color:#fff;}

同样的修改#nav为你自己的导航属性，背景颜色和字体颜色自行修改。

全部保存然后上传替换就ok了，注意：这个方法只针对首页 列表页有效，文章页面无效。

在zblog官方文档里面看到的这个，个人拿来使用了下，觉得效果还可以，借花献佛：

让导航突出显示当前页链接条目我们的大致思路是这样的，首先用js给导航部分中当前链接项加个区分的ID,如<li id=“current”>首页</li>，然后再用CSS定义就完成了。

步骤如下：

1、将以下代码放置在网站导航代码的后面。修改pageNav为你正在使用的主题导航栏的id名称。

<script type="text/javascript">
$("#pageNav>ul>li>a").each(function() {
    if ($(this).attr("href").toLowerCase().replace(/\/|[&#].*/g,"") == document.URL.toLowerCase().replace(/\/|[&#].*/g,"")){
        $(this).attr("class","current"); //给当前页的<a>加上class="current"，如<a class="current">首页</a>
    }
});
</script>

2、将以下css代码放置在正在使用的主题的css文件里面，可以根据实际情况修改css

#menu ul li a.current {
 background-color:#fff;
 color:#0B1316;
}

好了，文件重建下看看效果。

本站已经使用了这段代码，大家可以参考看看，不过我发现了一个问题，貌似这个效果只在栏目页有效，在内容页没有效果，不晓得是为什么，正在研究在，研究出来了也会发出来的。