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

Question

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

用户当前在页面 foo1-child 上，并且父级是 foo1，所以我需要将活动类添加到 Foo1： http://foo.com/foo1/foo1-child.html

资产净值：

<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 中的每个 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

如果你从它们的末尾切断“.html”并在该位置搜索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');
    }
  });

您可以在此处的“操作”中看到它：https://jsfiddle.net/c8u2f91v/ 请注意，它使用假的 location_pathname 而不是 location.pathname，因为 jsfiddle 在路径中没有必要的前缀，但它表明它应该可以工作。