使用jQuery / Java的导航样式更改

Question

我目前正在使用导航栏，并希望使用class =“ active-link”将当前页面标记为其导航项，因此我可以添加特定的样式来指示您所在的页面。但是，当我使用下面的jquery代码时，当您在首页（“ /”）上时，它将立即将类添加到所有三个导航项中。

我如何确保在URL为“ /”的主页上仅将类添加到“主页”的导航项中。

<nav>
  <a class="nav-link" href="/">Home</a>
  <a class="nav-link" href="/groups">Groups</a>
  <a class="nav-link" href="/deals">Deals</a>
</nav>
<script>
    $(function() {
  $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active-link');
});
</script>
这是我找到原始代码的地方：https://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/

我目前正在使用导航栏，并希望使用class =“ active-link”将当前页面标记为其导航项，因此我可以添加特定的样式来指示您所在的页面。 ...

Answer 1

a[href^="/"]选择其href属性值以“ /”开头的每个锚标记。因此，当您在主页上时，它将匹配所有URL。您应该将其从a[href^="/"]更改为a[href="/"]（操作员从^=更改为=）。您的脚本将如下所示：