如何在 bootstrap 4 中使用 javascript 将 nav li 类设置为“活动”？

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 需要做更多的工作，但是 如果您想在某个时候翻译您的网站，效果会更好