根据页面在边栏中突出显示 link

Question

我正在构建一个侧边栏导航来跟踪您在网站上的位置。我有一个下拉菜单，当您将鼠标悬停在它上面时，该菜单会展开。我希望导航栏中的 link 突出显示以指示您所在的页面。我让它在父页面上工作，但是如果你将鼠标悬停在下拉菜单上并且 select 一个子 link，那么 link 不会突出显示并且不会自动展开菜单来显示给你你在那个页面上。

我将我的代码放在 JSfiddle 中。 https://jsfiddle.net/6wrn5hgg/2/

下面是我正在使用的代码的快速浏览。

//Highlight current page
$(function() {
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('current');
    }
  });
});

//subbar menu drop down
$(document).ready(function() {

  $('li.parent').hover(function() {
    $(this).siblings().find('.subnav').slideUp();
    $(this).children('.subnav').slideDown();

    if ($(this).children('.subnav').slideDown() == window.location.href) {
      $(this).addClass('current').slideDown();
    }
  });

});

如何让菜单显示红色背景并自动展开导航？

Answer 1

window.location.href 和 <a> 标签的 href 不完全相同。请改用 indexOf() 函数。

$('.parent > a').each(function() {
   if (window.location.href.indexOf(this.href) > -1) {
       $(this).addClass('current');
   }
});

Answer 2

为了实现您正在寻找的东西，这里是选项：

选项 1：使用绝对 url :

检查window.location.href的值是否与anchor标签的href的值完全相同。

<li class="parent"><a href="https://fiddle.jshell.net/_display/" class="">About Us <span class="caret"></span></a>  // with absolute url 

    $(document).ready(function() {

      $('.parent a').each(function() {
        if ($(this).prop('href') == window.location.href) {
           $(this).addClass('current');
           $(this).closest('.parent').find('ul.subnav').slideDown();
        }
      });

      $('li.parent').hover(function() {
        $(this).siblings().find('.subnav').slideUp();
        $(this).children('.subnav').slideDown();

        if ($(this).children('.subnav').slideDown() == window.location.href) {
          $(this).addClass('current').slideDown();
        }
      });

    });

示例：https://jsfiddle.net/DinoMyte/6wrn5hgg/4/

选项 2：使用相对 url：

检查 window.location.href 的值是否包含 anchor 标签的 href 的值。

<li class="parent"><a href="/_display/" class="">About Us <span class="caret"></span></a>  // with relative url



$(document).ready(function() {

  $('.parent a').each(function() {
    if (window.location.href.indexOf($(this).prop('href')) != -1) {
       $(this).addClass('current');
       $(this).closest('.parent').find('ul.subnav').slideDown();
    }
  });

  $('li.parent').hover(function() {
    $(this).siblings().find('.subnav').slideUp();
    $(this).children('.subnav').slideDown();

    if ($(this).children('.subnav').slideDown() == window.location.href) {
      $(this).addClass('current').slideDown();
    }
  });

});

示例：https://jsfiddle.net/DinoMyte/6wrn5hgg/5/

根据页面在边栏中突出显示 link

Highlight link in sidebar based on page

javascript

jquery

navbar