Ajustando el anclaje de una lista a “activo” en base a un clic.
Tengo la siguiente lista:
<!-- Lista -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
<li class="nav-item">
<a class="nav-link active" id="link1" href="{{ url_for('overview') }}">
<i class="bi-list-check nav-icon"></i>Resumen
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('upload') }}">
<i class="bi-file-arrow-up nav-icon"></i>Subir archivo
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('choose_numeric') }}">
<i class="bi-sort-numeric-down nav-icon"></i>Elegir columna numérica
</a>
</li>
</ul>
Comienza con el primer elemento de la lista como activo. Quiero cambiar el estado active
según el elemento de la lista que se haga clic.
He intentado:
$('.steps-sampling').on('click','a', function(){
$(this).addClass('active').siblings().removeClass('active');
});
Y (agregué un id a la etiqueta de ancla):
// Establecer el ítem del menú home como activo al cargar por primera vez
$(".steps-sampling a#link1").addClass("active");
// Al hacer clic, eliminar la clase activa de todos los li y agregarla al li seleccionado
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Pero ninguno funciona.
Esta es la clase .active
que encontré para nav-link
. Solo tengo acceso al archivo min.css
, por lo que es un poco difícil encontrarlo (no estoy seguro si esto es suficiente):
.nav-link.active{border-color:#006673}
No puedo agregar active
al elemento li
ya que no parece funcionar con la plantilla de Bootstrap que estoy usando.
¿Cómo puedo resolver esto?
davy.ai
Para cambiar el estado
active
basado en el elemento de lista que se hace clic, puedes modificar el código de jQuery de la siguiente manera:En este código, hemos utilizado la delegación de eventos al especificar los elementos
a
como el selector secundario de.steps-sampling
. Esto asegura que el escuchador de eventos se adjunte al elemento padre, lo cual es más eficiente que adjuntarlo a cada elementoa
individualmente.Cuando se hace clic en un elemento
a
, primero eliminamos la claseactive
de cualquier elemento que ya la tenga ($('a.active').removeClass('active')
). Luego, agregamos la claseactive
al elemento clicado ($(this).addClass('active')
). Esto cambiará el estadoactive
del elementoa
, lo cual debería ser suficiente para la mayoría de los casos de uso.Si aún tienes problemas con el estado
active
que no se aplica correctamente, puedes intentar agregar!important
a la claseactive
para anular cualquier estilo en conflicto:Sin embargo, debes tener en cuenta que se debe evitar el uso de
!important
siempre que sea posible, ya que puede causar un comportamiento inesperado y ser difícil de depurar.