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

Question

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

这是我的导航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'，因此，由于所有网址都以'/'开头，因此将'active'类添加到所有网址中。

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

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

Answer 2

一种更简单的方法是将链接的href属性与页面网址进行比较

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

尽管href 属性仅包含路径，但DOM中的href 属性包含完整网址