突出显示当前页面导航

Question

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

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

我不确定如何使用include（nav）而不仅仅是固定导航（页面上的代码），我可以在每个页面上手动添加“活动”类。

我知道我需要从'window.location.href'开始才能获得我到达的页面，但是我无法将其转到特定的菜单项来添加我的活跃的课程。

Answer 1

您可以将数据属性添加到您希望处于活动状态的元素。 使data属性等于页面的URL并使用Javascript检查以在页面加载时添加活动类。

我不确定这是否是最简单的方法，但它会很好用。

Answer 2

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

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