突出显示当前页面导航答案

【问题标题】：highlight current page nav突出显示当前页面导航
【发布时间】：2017-03-25 22:11:30
【问题描述】：

页面是：http://rezolve.4pixels.com/banks-and-telcos/demo/index.php#

我希望我的导航通过将“活动”类添加到特定的“li”来显示我所在的页面，但我的导航是一个包含。我知道如何在单页滚动站点上执行此操作，因为我只是检测何时单击链接并将类添加到父“li”。

我不确定在使用包含（导航）而不是固定导航（页面上的代码）时我是如何工作的，我可以在每个页面需要的地方手动添加“活动”类。

我知道我需要从“window.location.href”开始获取我要到达的页面，但是我无法将其与特定菜单项联系起来以添加我的活跃的班级。

【问题讨论】：

标签： jquery include nav

【解决方案1】：

您可以向想要处于活动状态的元素添加数据属性。使 data 属性等于页面的 URL，并使用 Javascript 检查以在页面加载时添加一个活动类。

我不确定这是否是最简单的方法，但效果很好。

【讨论】：

【解决方案2】：

文档准备好后，您可以将 href 与当前页面 url 进行比较

$(document).ready(function(){
  var currentPageUrl = location.href;
  $('li a').each(function(){
      $(this).toggleClass('active', this.href === currentPageUrl);
  });
});

【讨论】：

感谢 Hipady，接近了 ;) 我已经为没有下拉菜单的导航项目工作，但不知道为什么它不能从下拉菜单中的链接工作。它们的目标是“.nk-nav li a”，我认为它会在 DOM 中找到任何带有“父母”的“li”来附加活动类。 $(document).ready(function(){ "use strict"; var currentPageUrl = location.href; $('.nk-nav li a').each(function(){ $(this).parents("li ").toggleClass('active', this.href === currentPageUrl); }); });