Tengo una barra de navegación cuyos enlaces "a" redirigen a diferentes páginas. Quería tener una barra de navegación con el enlace activo subrayado. Pero cuando hago clic en otros enlaces, abre otras páginas y también ejecuta la función js, pero nuevamente vuelve a cero (subraya el primer enlace aunque el otro enlace está activo). Incluyo el navbar.html en todas las páginas usando la etiqueta de inclusión y tener un único archivo css y js común para todas las páginas html.
JS
$('.nav-link').on('click', function() { $('.active-link').removeClass('active-link'); $(this).addClass('active-link'); });HTML
<div class="navbar-container py-0"> <ul> <li class="nav-link active-link"> <a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6" href="{% url 'screen_1' screen.id %}"> Screen 1 </a> <div class="underline"></div> </li> <li class="nav-link"> <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6" href="{% url 'screen_2' screen_2.id %}"> Screen 2 </a> <div class="underline"></div> </li> <li class="nav-link"> <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6" href="{% url 'screen_3' screen_3.id %}"> Screen 3 </a> <div class="underline"></div> </li> </ul> </div>CSS
a { outline: none; } .navbar-container { font-size: 0; } .navbar-container ul { margin: 0; padding: 0; text-align: right; display: inline-block; vertical-align: middle; } .navbar-container ul li { display: inline-block; font-size: 1rem; } .navbar-container ul li a { color: #000000; text-decoration: none; display: inline-block; transition: color 0.5s; } .navbar-container ul li .underline { height: 3px; background-color: transparent; width: 0%; transition: width 0.2s, background-color 0.5s; margin: 0 auto; } .navbar-container ul li.active-link .underline { width: 100%; background-color: #0c0c0c; } .navbar-container ul li:hover .underline { background-color: #000000; width: 100%; } .navbar-container ul li:hover a { } .navbar-container ul li:active a { transition: none; color: rgb(12, 12, 12); } .navbar-container ul li:active .underline { transition: none; background-color: rgb(0, 0, 0); }Javascript se ejecuta en la carga de la página sin una "memoria" de lo que hizo antes de la carga.
Entonces, si hace clic en el enlace en su primera página, el clic activa un enlace a su nueva página. Cuando se carga esta página, todas las modificaciones que hizo con javascript se han ido. La página no sabrá en qué enlace hizo clic antes y el enlace activo original estará activo.
Esto puede ser diferente cuando se usa SPA con React o Vue, pero con VanillaJS esa es la forma en que funcionan los navegadores.
Para obtener el enlace activo, puede verificar qué link-href coincide con la URL actual a través window.location.href .
Creo que necesita agregar código js para cada página html para agregar automáticamente la clase active-link a la etiqueta li.
Por ejemplo:
Este es el código de barras de navegación:
<div class="navbar-container py-0"> <ul> <li id="screen_1" class="nav-link"> <a class="mb-sm-1 mb-md-0 p-1 pr-3 fs-6" href="{% url 'screen_1' screen.id %}"> Screen 1 </a> <div class="underline"></div> </li> <li id="screen_2" class="nav-link"> <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6" href="{% url 'screen_2' screen_2.id %}"> Screen 2 </a> <div class="underline"></div> </li> <li id="screen_3" class="nav-link"> <a class=" mb-sm-1 mb-md-0 p-1 px-3 fs-6" href="{% url 'screen_3' screen_3.id %}"> Screen 3 </a> <div class="underline"></div> </li> </ul> </div> Eliminé la clase de active-link para todas las etiquetas li y creé 3 ID diferentes para cada una.
Ahora, para cada una de las páginas html de la pantalla 1, pantalla 2 y pantalla 3, simplemente agregue un código para configurar la clase de active-link para el enlace de navegación correspondiente.
Por ejemplo, en la página html de la pantalla 1:
$("#screen_1").addClass("active-link");