zblog
当前位置:首页 > 商学院 > zblog > 正文内容

zblog

导航高亮js版

豫唐网络2022-10-08 10:47576

    没有高亮的导航是没有灵魂的,然后开始我们的教程吧。

1、根据《zblog二级导航下拉导航多级导航配置设置教程》设置html代码;

2、给对应的导航ui层添加id属性。

id=divNavBar

3、添加css文件

#divNavBar a.on {color: #FCEE8B;}

4、添加js文件

$(document).ready(function() {
    var s = document.location
    $("#divNavBar a").each(function() {
      if (this.href == s.toString().split("#")[0]) {
        $(this).addClass("on")          //li下的a标签添加calss="on"
        $(this).parent().addClass("lion"); //li添加calss="lion"
        return false
      }
    })
})

5、扩展(配合面包屑实现进入文章页面的时候也高亮)

$(document).ready(function() {
  var s = document.location;
  var ss = $(".crumb-nav a:eq(1)").attr("href");
  var sss = $(".crumb-nav a:eq(2)").attr("href");
  $("#starlist a").each(function() {
    if (this.href == s.toString().split("#")[0] || this.href == ss || this.href == sss) {
      $(this).addClass("on")          //li下的a标签添加calss="on"
      $(this).parent().addClass("hover"); //li添加calss="lion"
      return false
    }
  })
})

6、完工。

这个时候,再去点击导航对应的链接,就会发现,导航高亮已经生效了。

扫描二维码推送至手机访问。

版权声明:本文由汤阴县豫唐网络科技有限公司发布,如需转载请注明出处。

本文链接:https://www.ytecn.com/post/356.html

分享给朋友:

相关文章

php curl通过代理获取数据

php curl通过代理获取数据

php curl通过代理获取数据$curl=curl_init(); curl_setopt($curl, CURLOPT_URL, "http://www.baidu...

zblogphp一键强制开启开发模式

zblogphp一键强制开启开发模式

    有时候在使用zblogphp的时候,因修改代码或者其他什么操作的时候,导致全站打不开。而,正常情况下,在运营的站点,都是不开启《开发模式》的,这个时候就...

zblogphp程序报错后如何获得帮助

zblogphp程序报错后如何获得帮助

zblogphp程序报错后获取帮助分为免费和付费两种。免费帮助方法1开启调试模式(点击打开新链接),将截图发到群内。方法2提交工单或私信把网站信息发群主,等凑够一定数量后,群主开直播查错。付费帮助找群...

zblogphp数据字典zblogphp数据库字典zblogphp数据表字段大全

zblogphp数据字典zblogphp数据库字典zblogphp数据表字段大全

        zblogphp系统默认为8张表,分别为category(分类表)、comment(评论表)、config(系统和应用配置表...

zblog提示授权文件非法怎么办

zblog提示授权文件非法怎么办

        zblog在开启主题或者插件的时候,有时候会提示授权文件非法。这种需要怎么处理么?  ...

zblogphp调试登录助手

zblogphp调试登录助手

本着不接触用户账户密码的原则,请优先根据本插件提供信息。《调试登录助手》,地址:https://app.zblogcn.com/?id=18484本插件用于在不需要给出密码明文的前提下让他人登录站点后...