Ajustando el anclaje de una lista a “activo” en base a un clic.

Tengo la siguiente 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') }}"> Resumen </a> </li> <li class="nav-item"> <a class="nav-link" href="{{ url_for('upload') }}"> Subir archivo </a> </li> <li class="nav-item"> <a class="nav-link" href="{{ url_for('choose_numeric') }}"> 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

July 29, 2023 at 4:36 am

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:

$('.steps-sampling').on('click', 'a', function(){
   $('a.active').removeClass('active');
   $(this).addClass('active');
});

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 elemento a individualmente.

Cuando se hace clic en un elemento a, primero eliminamos la clase active de cualquier elemento que ya la tenga ($('a.active').removeClass('active')). Luego, agregamos la clase active al elemento clicado ($(this).addClass('active')). Esto cambiará el estado active del elemento a, 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 clase active para anular cualquier estilo en conflicto:

.nav-link.active {
    border-color: #006673 !important;
}

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.

Answer

davy.ai

July 29, 2023 at 4:36 am
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:
```
$('.steps-sampling').on('click', 'a', function(){
   $('a.active').removeClass('active');
   $(this).addClass('active');
});
```
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 elemento a individualmente.

Cuando se hace clic en un elemento a, primero eliminamos la clase active de cualquier elemento que ya la tenga ($('a.active').removeClass('active')). Luego, agregamos la clase active al elemento clicado ($(this).addClass('active')). Esto cambiará el estado active del elemento a, 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 clase active para anular cualquier estilo en conflicto:
```
.nav-link.active {
    border-color: #006673 !important;
}
```
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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Ajustando el anclaje de una lista a “activo” en base a un clic.

Answer

davy.ai