【发布时间】：2020-07-17 11:47:27
【问题描述】：
我非常绝望，我检查了 stackoverflow 上的所有类似问题，并尝试了在谷歌上找到的许多解决方案，但徒劳无功......我真的无法找到解决我的问题的有效解决方案。
我正在使用 Bootstrap 4 开发一个站点，并且我有一个导航栏。当我单击其中一个导航链接时，我希望它具有“活动”类，而其他人保持正常。
我可能没有选择正确的元素或使用错误的 jquery/javascript 代码。
导航栏 html 代码 (1) 位于一个单独的 header.html 文件中，我在 html 页面的开头使用 JS 加载该文件(2)：
(1)
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top ml-auto">
<div class="container">
<a class="navbar-brand" href="../index.html#"><img src="../images/DSIMB.svg" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="members.html#">Members</a>
<a class="dropdown-item" href="publications.html#">Publications</a>
<a class="dropdown-item" href="teaching.html#">Teaching</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="web_tools.html#">Web Tools</a>
</li>
<li class="nav-item">
<a class="nav-link" href="research.html#">Research</a>
</li>
<li class="nav-item">
<a class="nav-link" href="infrastructures.html#">Infrastructures</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html#">Contacts</a>
</li>
</ul>
</div>
</div>
</nav>
(2)
<script>
$(function() {
$("#header").load("./header.html");
});
</script>
这是我放在html页面末尾</body>标签之前的JS：
<script>
$('.navbar .nav-item .navlink').click(function() {
$('.navbar .nav-item').removeClass('active');
$(this).addClass('active');
})
</script>
这里是我想设置为活动导航链接的活动 css 类：
.navbar .nav-item > .nav-link.active {
color:white;
font-weight: 700;
}
请告诉我我做错了什么......
更新
我把找到的解决方案放在这里，这要归功于取自this site 的一个简单的 sn-p（我适应了我的代码），@NmiDev 亲切地指出了我。
由于 href / location 解析，我将自定义活动类添加到导航栏中的链接：
$("#header").load("./header.html", function(){
$('a[href="' + location.pathname.split("/")[2] + '"]').addClass("active-nav");
});
【问题讨论】：
标签： javascript jquery html css bootstrap-4