使用jQuery将活动类添加到导航中的当前页面

Question

我正在尝试将“活动”类添加到标题中当前页面的导航链接。我取得了一些进展，但我遇到了一个小错误，希望能得到一些帮助。我知道答案很明显，但是，我是 jQuery/Javascript 的新手，我很难自己找到它。

这是我的导航 HTML 结构：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="nav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="/" class="nav-link">Me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/work">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/play">Play</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
</nav>

足够简单。这是 jQuery 代码：

$(function() {
  $('nav li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

代码在内页上工作，但是，我遇到了一个问题，在主页（'Me'，href="/"）上，代码正在将活动类添加到所有导航链接。

我认为如果我使用 href="/work/" （在所有链接的末尾添加 /），问题会得到解决，但是，当我这样做时，链接不再有效，因为网站随后会尝试去 www.sitename.com/work/.php。

这是一个简单的 .htaccess 或 jQuery 修复，但我不确定是哪一个，或者如何实现它。

谢谢！

Answer 1

这是因为您使用了 ^= 选择器。 这意味着“startWith”，因此由于所有 url 都以“/”开头，因此将向所有 URL 添加“活动”类。

用相等的选择器替换它，它应该可以工作。

$('nav li a[href="/' + location.pathname.split("/")[1] + '"]').addClass('active');

Answer 2

比较简单的方法是比较链接到页面 url 的 href 属性

$('nav li a').filter(function(){
  return this.href === location.href;
}).addClass('active');

虽然 href attribute 只包含一个路径，但是 DOM 中的 href property 包含完整的 url