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

问题描述 投票:1回答:1

我目前正在使用导航栏,并希望使用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”将当前页面标记为其导航项,因此我可以添加特定的样式来指示您所在的页面。 ...

javascript jquery html
1个回答
0
投票

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


推荐问答