颠覆霸主

 找回密码
 立即注册

QQ登录

只需一步,快速开始

zblog实现分类导航当前位置页面高亮显示

  [复制链接] [添加相关主题]
godkings 发表于 2022-3-25 14:31:50 | 显示全部楼层 |阅读模式
zblog想要当前位置导航高亮显示,还只能用js来实现,其他方法都感觉太过于复杂,不过js实现也挺好,对网站没有什么影响,对SEO优化也是友好的。实现导航分类当前页面高亮显示可以有2这种方法。

方法一:
直接将下面的代码放在header或footer文件里面都可以。

  1. <script>
  2. $(function(){
  3.     var surl = location.href;
  4.         var surl2 = $(".place a:eq(1)").attr("href");
  5.         $("#nav ul li a").each(function() {
  6.                 if ($(this).attr("href")==surl || $(this).attr("href")==surl2) $(this).parent().addClass("on")
  7.         });
  8. });
  9. </script>
复制代码

这种方法显得简单,首先你的导航栏必须有个id属性为“nav”,然后你网站还得有个面包屑导航class属性为“place”,大致意思就是判断当前页面中的“面包屑导航(即当前位置).place这个class”是否和浏览器地址栏的网站是否一样,如果一样就在class里面加上一个“on”,另外自己去写一下on的css代码即可,也可以用下面的:
  1. #nav ul li.on a{color:red;}
复制代码


方法二:
先引入jQuery:
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
复制代码


在header或footer文件里面添加代码:
  1. <script type="text/javascript">

  2. $("#menu>ul>li>a").each(function() {

  3. if ($(this).attr("href").toLowerCase().replace(/\/|[&#].*/g,"") == document.URL.toLowerCase().replace(/\/|[&#].*/g,"")){

  4. $(this).attr("class","current"); //给当前页的<a>加上class="current",如<a class="current">首页</a>

  5. }

  6. });

  7. </script>
复制代码


之后添加上面的js代码,再给添加进去的样式.current进行css美化,最后重建文件即可实现高亮显示效果。


上一篇:zblog判断PC电脑端还是移动手机端包括微信QQ浏览器
下一篇:zblog文章初始随机浏览数添加不被升级覆盖的方法
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ| Archiver|小黑屋| 颠覆霸主 ( 京ICP备12023415号-2 )

声明:本站的任何信息和内容仅代表作者的立场和观点,与颠覆霸主网无关。

禁止在颠覆霸主网发布任何与《中华人民共和国法律》相抵触的言论!

GMT+8, 2022-10-3 21:57 , Processed in 0.095965 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.