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会有更多的工作，但是如果你想在某个时候翻译你的网站，会更好地保持

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

1 个答案: