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

zblog

导航高亮js版

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

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

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

分享给朋友:

相关文章

ZblogPHP百度云加速原创自定义规则

ZblogPHP百度云加速原创自定义规则

ZblogPHP最完美的配置规则方案:配置第一条自定义规则处于规则配置的最下方:目标URL:*abc.com/*  解释*abc.com是所有子域名的意思包括了www域名,那abc...

zblogphp调试登录助手

zblogphp调试登录助手

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

查看当前页面使用的sql语句zblog版

查看当前页面使用的sql语句zblog版

        在使用网站的时,有时候会遇见页面打开缓慢情况,在确定服务器和访问量均是正常的情况下,这个时候一般都是程序...

zblog插件怎么安装

zblog插件怎么安装

        zblog的插件分为应用中心插件和自定义插件两大类。应用中心插件又分为免费插件和付费插件。自定义插件分为...

zblog主题插件导航函数

zblog主题插件导航函数

1、在主题或者插件的include.php文件添加导航函数function ytecn_SubMenu($id){     $arySubMenu&...

批量重命名批量处理别名

批量重命名批量处理别名

        在运营网站的时候会遇见被采集的情况,但zblog的文章默认url又是递增的数字模式。为了防止被采集,我们...