在子页面上将活动类添加到父导航

Question

当用户位于基于URL的子页面内时，我需要突出显示父导航项。

用户目前位于页面 foo1-child ，父级是 foo1 ，因此我需要将活动类添加到 Foo 1 ： http://foo.com/foo1/foo1-child.html

NAV：

<ul class="main-nav">
  <li><a href="/foo.com/foo1.html">Foo 1</a></li>
  <li><a href="/foo.com/foo5.html">Foo 5</a></li>
</ul>

我在向导航中的链接添加活动类时没有问题，因为我只是比较.nav li a与URL中的每个href但是如何在URL中检查匹配的锚链接名称的URL或者类似的东西？

当前的JS

  $('.main-nav li > a').each(function () {
    var $this = $(this);
    if ($this.attr('href').indexOf(location.pathname) !== -1) {
      $this.addClass('active');
    }
  });

Answer 1

如果你切断了＆＃34; .html＆＃34;从它们的两端开始，你在该位置搜索a的href（应该更短），它应该可以工作。

  $('.main-nav li > a').each(function () {
    var $this = $(this);
    var loc = location.
    if (location.pathname.replace(/\/[^\/]*\.html$/, '').startsWith($this.attr('href').replace(/\.html$/, ''))) {
      $this.parent().addClass('active');
    }
  });

你可以在＆＃34;动作＆＃34;这里：https://jsfiddle.net/c8u2f91v/注意它使用假的location_pathname而不是location.pathname，因为jsfiddle在路径中没有必要的前缀，但它表明它应该有效。