Question

我试图添加“活跃的”＃39;类到当前页面的标题中的导航链接。我取得了一些进展，但我遇到了一个小错误，并希望得到一些帮助。我知道答案很明显，然而，我是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');
});

代码适用于内页，但是，我遇到了一个问题，其中在主页上（＆＃39;我＆＃39;，href =＆＃34; /＆＃34;），代码正在将活动类添加到所有导航链接。

如果我使用href =＆＃34; / work /＆＃34;我认为这个问题会解决。（添加了/到所有链接的末尾），但是，当我这样做时，链接不再有效，因为该网站然后尝试访问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 属性包含完整的URL

使用jQuery在nav中向当前页面添加活动类

2 个答案: