如何使用 vanilla js 在导航栏的链接中应用“活动”类？答案

【问题标题】：How to apply the "active" class in the links of a navigation bar using vanilla js?如何使用 vanilla js 在导航栏的链接中应用“活动”类？
【发布时间】：2019-12-12 09:00:11
【问题描述】：

我正在使用 bootstrap 和 vanilla js。我想要做的是，当您单击其中一个链接时，您将被分配“活动”类。

到目前为止，我有以下代码：

var links = document.querySelectorAll(".links-menu");
for (var i = 0; i < links.length; i++) {
  var link = links[i];
  link.onclick = function() {
    var prev = document.getElementsByClassName("active");
    if (prev && prev[0]) {
      prev[0].classList.remove("active");
    }
    this.classList.add("active");
  };
}

.navbar {
  position: fixed;
  width: 100%;
  z-index: 100;
  ul li a {
    color: #4d4d4d;
    font-size: 1.1rem;
  }
  ul li a:hover {
    color: #611ac5;
    border-bottom: 2px solid #611ac5;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
}

.active {
  color: #611ac5 !important;
  border-bottom: 2px solid #611ac5;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  font-weight: 700;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg py-2">
  <div class="container-fluid px-2">
    <ul class="navbar-nav ml-auto mr-0 text-center">
      <li class="nav-item px-3"><a href="#" class="nav-link pb-1 px-0 links-menu">home</a></li>
      <li class="nav-item px-3"><a href="#" class=" links-menu nav-link pb-1 px-0">contact</a></li>
      <li class="nav-item px-3"><a href="#" class=" links-menu nav-link pb-1 px-0">about</a></li>
    </ul>
  </div>
</nav>
<header class="Banner-inicio container-fluid">
  <div class="row align-items-center h-100">
    <div class="Detalles-b mx-auto text-center my-5 py-5">
      <h1 class="text-center mt-md-5 mb-2">Lorem ipsum dolor sit</h1>
      <p class="text-center mb-md-5 mx-3">doloremque quaerat maxime sed, quis, quod accusamus quibusdam. Quos quas repudiandae fugiat.</p>
    </div>
  </div>
</header>

但是当点击并重定向到其他页面时，似乎没有分配类。

我想要的是，当我点击一个链接并重定向到另一个页面时，该链接会显示为该类“活动”

我知道 JQuery 可以做什么，而且它更容易，但我不想只通过导航栏使用这个库

【问题讨论】：

你是如何浏览网页的？
你需要使用 PHP 或者在 JS 中使用 cookie 试试
啤酒你有用户最终选择的新路线吗？
这是一个迷你项目，页面是：/index.html, /contact.html,/about.html
我认为，如果您向链接添加一个 id，那么您可以创建一个函数来处理它，如 (

标签： javascript html css

【解决方案1】：

我会在每个页面的 h1 上放置一个数据属性，表示哪个菜单选项对应于当前页面。然后，在页面加载时，获取 h1 数据集并将活动类添加到右侧菜单项。唯一的缺点是菜单项会从非活动状态闪烁到活动状态。除非您将单击的菜单项存储在后端并在昏暗渲染期间添加类，否则我看不到避免闪烁的好方法。

【讨论】：