zblog php导航栏当前页突出高亮显示的方法

借鉴了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了,注意:这个方法只针对首页 列表页有效,文章页面无效。




阿达运用到仿站的时候添加的下面的样式全部代码如下:

<script  type="text/javascript">
$(document).ready(function(){ 
    var s=document.location;
    $("#tabs_nav a").each(function(){
        if(this.href==s.toString().split("#")[0]){$(this).addClass("dangqiandao");return false;}  //添加dangqiandao的样式
    });
});
</script>    
<ul class="daohang" id="tabs_nav">    //为ul添加一个id为tabs_nav
<li><a href="http://localhost/original/" class="">Home</a></li>
<li><a href="http://localhost/original/category-1.html" class="">News</a></li>
<li><a href="http://localhost/original/category-2.html"class="">Products</a>
<ul class="yiji">
<li><a href="http://localhost/original/category-3.html">Product1</a></li>
<li><a href="http://localhost/original/category-4.html">Product2</a></li>
</ul>
</li>
<li><a href="http://localhost/original/2.html"class="">Guest</a></li>
</ul>



css部分添加dangqiandao的样式:
.dangqiandao{ color:#007cbe; background:url(../img/daohang.png) no-repeat center bottom !important;}


您可以还会对下面的文章感兴趣:

最新评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。