服务器之家:专注于服务器技术及软件下载分享
分类导航

DEDECMS|帝国CMS|Discuz|PHPCMS|Wordpress|ZBLOG|ECSHOP|苹果CMS|极致CMS|CMS系统|

服务器之家 - 建站程序 - ZBLOG - z-blog让导航突出显示当前页链接条目

z-blog让导航突出显示当前页链接条目

2019-10-08 13:06zblog教程网 ZBLOG

z-blog让导航突出显示当前页链接条目: 我们的大致思路是这样的,首先用js给导航部分中当前链接项加个区分的ID,如li id=current首页/li,然后再用CSS定义就完成了。 setp1 :加入js(jQuery代码),如下 原先功能简单的代码 script type=text/j

z-blog让导航突出显示当前页链接条目:

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

  • setp1 :加入js(jQuery代码),如下

    原先功能简单的代码

    <script type="text/javascript">
    
    $(document).ready(function(){
    
    $("#menu ul>li").each(function() {  //我们假设导航部分的ID为menu,结构是<div id="menu"><ul><li>...
    
        if ($(this).find("a").attr("href")==document.URL){
    
        $(this).attr("id","current")  //给当前页的<li>加上id="current",如<li id="current">首页</li>
    
        }
    
    });
    
    });
    
    </script>

    haphic将这一代码做了完善,此代码只支持 Z-Blog 模板.

    haphic 完善后的代码

    <script type="text/javascript">
    
        $("#menu ul>li").each(function() {
    
            if ($(this).find("a").attr("href").toLowerCase() !== str00.toLowerCase()){
    
                if (document.URL.toLowerCase().indexOf($(this).find("a").attr("href").toLowerCase()) !== -1){
    
                    $(this).attr("id","current")
    
                }
    
            }else{
    
                if ($(this).find("a").attr("href").toLowerCase() == document.URL.toLowerCase()){
    
                    $(this).attr("id","current")
    
                }
    
            }
    
        });
    
    </script>
  • setp2 :定义CSS样式

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

延伸 · 阅读

精彩推荐
  • ZBLOGzblog提示“JavaScript加载失败”的原因和解决办法

    zblog提示“JavaScript加载失败”的原因和解决办法

    本文主要讲解zblog提示“JavaScript加载失败”的原因和解决办法,适合于使用zblog建站的朋友,有需要的可以参考一下。...

    天兴工作室12002020-06-10
  • ZBLOGzblog忘记后台账号密码怎么办?

    zblog忘记后台账号密码怎么办?

    zblog网站的后台账号密码要是忘记了怎么办呢?有两种方案,一种是登录数据库,替换目前用户的密码,第二种方法是,适用官方的密码找回工具....

    李洋个人博客5822020-10-11
  • ZBLOGzblog伪静态设置教程

    zblog伪静态设置教程

    zblog默认是动态页面链接,从seo角度考虑,做成静态链接会更好一些,zblog的伪静态设置还是挺方便的,下面来看一下如何设置 ...

    万书涛8682021-07-12
  • ZBLOGz-blog分类目录静态化实现方法

    z-blog分类目录静态化实现方法

    今天狠狠的给这个博客动了一次大手术,那就是所有目录静态化,包括博客首页静态化,归档首页静态化 ...

    zblog教程网7722019-10-10
  • ZBLOGz-blog评论加入Gravatar头像功能

    z-blog评论加入Gravatar头像功能

    Gravatar提供的服务概念上十分简单,就是把个人email地址与头像捆绑(登录 www.gravatar.com申请帐户,上传照片即可完成),然后当你在支持Gravatar的网站留言并使...

    zblog教程网4082019-10-08
  • ZBLOGzblog文章自动生成摘要长度修改方法

    zblog文章自动生成摘要长度修改方法

    zblog有个自动生成文章摘要的功能,这给我们在发表文章的时候提供了一些方便,节省了要手动添加文章摘要的时间,这个功能很好 ...

    zblog教程网4112019-10-10
  • ZBLOGz-blog完美转移到wordpress的方法分享

    z-blog完美转移到wordpress的方法分享

    很多朋友刚建立博客的时候都是采用国内优秀的博客系统:Z-BLOG,用一段时间过后很多人都想转移到wordpress,各种转移原因很多。学朋的主要原因就是Z-BLO...

    zblog教程网18232019-10-10
  • ZBLOGzblog提示PHP版本太低是什么原因

    zblog提示PHP版本太低是什么原因

    在安装zblog模板的时候,有时候会提示,php版本太旧,至少需要5.x以上版本,这个问题如何解决呢,下面一起来看一下 ...

    万书涛17362021-07-12