javascript - 如何使用 vanilla js 在导航栏的链接中应用 "active"类？

Question

我正在使用 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 可以做什么，而且更容易，但我不想仅通过导航栏来使用这个库

Answer 1

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