He creado con barra de navegación, no he hecho mucho desarrollo web.
<nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"> <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"> <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li> <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li> <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li> <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li> <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li> <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li> <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li> </ul> </div> </nav>Esta barra de navegación está vinculada en la parte superior de todas las demás páginas para reducir la repetición de código. ¿Puede alguien ayudarme con el código para que cuando se haga clic en el elemento del menú, la clase "activa" se agregue al elemento li? Esto luego desencadena css.
CSS:
.nav-link.active { color: white; }Gracias
Aquí está el código completo exacto para su requerimiento en JavaScript puro. Espero que ayude
const links = document.querySelectorAll('.nav-link'); if (links.length) { links.forEach((link) => { link.addEventListener('click', (e) => { links.forEach((link) => { link.classList.remove('active'); }); e.preventDefault(); link.classList.add('active'); }); }); } .nav-link.active { color: white; } <nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"> <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2" > <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"> <a class="nav-link" href="index.html"> <strong style="text-transform: uppercase">home</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html"> <strong style="text-transform: uppercase">about</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="flights.html"> <strong>FLIGHTS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="hotels.html"> <strong>HOTELS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="holidays.html"> <strong>HOLIDAYS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="property.html"> <strong>PROPERTY</strong> </a> </li> <li class="nav-item active"> <a class="nav-link" href="car_hire.html"> <strong>CAR HIRE</strong> </a> </li> </ul> </div> </nav>Use classList y toggle
document.querySelectorAll(".nav-item").forEach((ele) => ele.addEventListener("click", function (event) { event.preventDefault(); document .querySelectorAll(".nav-item") .forEach((ele) => ele.classList.remove("active")); this.classList.add("active") }) ); .active { color: green; } <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li> <li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li> <li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li> </ul>Agregue el siguiente código en su JS:
$(".nav-item").click(function() { $(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags $(this).addClass("active"); // This will add active class in clicked <li> });