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

Question

I am working with bootstrap and vanilla js. What I want to do is that when you click on one of the links you will be assigned the "active" class.

So far I have the following code:

 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>

but when clicked and redirected to the other page, it seems that the class was not assigned.

what I want is that when I click on a link and redirect to another page, that link appears with that class "active"

I know what can be done with JQuery and it is easier, but I do not want to use this library only by a navigation bar

Answer 1

I'd put a data attribute on the h1 for each page that signifies which menu option corresponds to the current page. Then, on page load, get the h1 dataset and add the active class to the right menu item. The only downside to this is that the menu item will flicker from not active to active. Unless you store the clicked menu item on the backend and add the class during the dim render though, I don't see a great way to avoid the flicker.