个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 28 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章z-blog让导航突出显示当前页链接条目由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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;}

最后此篇关于z-blog让导航突出显示当前页链接条目的文章就讲到这里了,如果你想了解更多关于z-blog让导航突出显示当前页链接条目的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

28 4 0
文章推荐： 一句简单命令重启nginx
文章推荐： 让我坚守ZBLOG的十二大理由
文章推荐： z-blog评论留言的引用按钮写法详解
文章推荐： z-blog自动加入版权信息
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com