jQuery/Javascript改变了导航样式

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/

Answer 1

a[href^="/"]选择href属性值以"/"开头的每个锚点标记。所以，当你在主页上时，它会匹配所有的URL。您应该将其从a[href^="/"]更改为a[href="/"](运算符从^=更改为=(
您的脚本将如下所示：

<script>
$(function() {
$('nav a[href="/' + location.pathname.split("/")[1] + '"]').addClass('active-link');
});
</script>

编辑

正如@freedomn-n所指出的，它不适用于子页面。您需要为此添加额外的逻辑。