如何在引导程序 4 中使用 javascript 将 nav li 类设置为"active"？

Question

>编辑：为了更清楚，我正在尝试使导航栏按钮对您所在的任何页面都处于活动状态。

我在这里有一个不错的小导航栏，我试图在导航栏的每个页面上激活 ul/li 类。但是由于某种原因，它根本不起作用。

这是我的导航：(包括我尝试运行的javascript(

var selector, elems, makeActive;
selector = '.nav-link';
elems = document.querySelectorAll(selector);
makeActive = function () {
for (var i = 0; i < elems.length; i++)
elems[i].classList.remove('active');

this.classList.add('active');
};
for (var i = 0; i < elems.length; i++)
elems[i].addEventListener('mousedown', makeActive);

<!-- Start Navigation -->
<nav class="navbar navbar-light bg-faded">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
&#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="navbar-header">
<a class="navbar-brand" href="#">A Trainers Best Friend</a>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item">
<a class="nav-link" href="home.php">Home <span class="sr-only"></span> <i class="fa fa-home" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="clients.php">Clients <i class="fa fa-address-book" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Schedule <i class="fa fa-calendar" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Session Manager <i class="fa fa-handshake-o" aria-hidden="true"></i></a>
</li>
		  <li class="nav-item">
<a class="nav-link" href="logout.php">Logout <i class="fa fa-sign-out" aria-hidden="true"></i></a>
</li>
</ul>
</div>
</nav> 
<!-- End Navigation -->

正如您可能看到的那样，我的js不起作用。我尝试将我的选择器更改为 .nav、.nav-link、.nav li，但似乎没有任何工作可以完成。任何帮助将不胜感激。

Answer 1

您可能将其用于所有页面。它分析按钮的innerHTML，并从字典中查找匹配的 URL 路径。

const paths = {
'About': '/about',
'Help': '/help'
// etc... for all your pages
}
for (let nav of document.querySelectorAll('.nav-link')){
if (paths[nav.innerHTML] === window.location.pathname)
nav.classList.add('active')
}

您还可以修改代码以查询导航链接的id而不是innerHTML。为每个链接添加不同的id需要做更多的工作，但是 如果您想在某个时候翻译您的网站，会更好