tengo la siguiente lista:
<!-- List --> <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>Overview </a> </li> <li class="nav-item"> <a class="nav-link" href="{{ url_for('upload') }}"> <i class="bi-file-arrow-up nav-icon"></i> Upload file </a> </li> <li class="nav-item"> <a class="nav-link" href="{{ url_for('choose_numeric') }}"> <i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column </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 en el que se hace clic.
Lo intenté:
$('.steps-sampling').on('click','a', function(){ $(this).addClass('active').siblings().removeClass('active'); });Y (identificación agregada a la etiqueta de anclaje)
//on first time load set the home menu item active $(".steps-sampling a#link1").addClass("active"); //on click remove active class from all li's and add it to the clicked li $("a").click(function(){ $("a").removeClass("active"); $(this).addClass("active"); });Pero ambos no funcionan.
Esta es la clase .active que pude encontrar para nav-link. Solo tengo acceso a min.css , por lo que es un poco difícil de encontrar (no estoy seguro de 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.
¿Como puedo resolver esto?
Su código funciona bien, excepto por el estilo,
¡Solo intente forzar el estilo usando !important para anular el estilo de arranque predeterminado
Vea el siguiente fragmento:
$('.steps-sampling').on('click','a', function(){ $(this).addClass('active').siblings().removeClass('active'); }); //on first time load set the home menu item active $(".steps-sampling a#link1").addClass("active"); //on click remove active class from all li's and add it to the clicked li $("a").click(function(){ $("a").removeClass("active"); $(this).addClass("active"); }); .active { color:green !important; font-weight:bold; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <!-- List --> <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="#"> <i class="bi-list-check nav-icon"></i>Overview </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi-file-arrow-up nav-icon"></i> Upload file </a> </li> <li class="nav-item"> <a class="nav-link" href="#"> <i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column </a> </li> </ul>Cada vez que configura una función como oyente de un evento, cuando se activa, pasa el objeto del evento a la función, puede usarlo para saber en qué elemento ha hecho clic el usuario:
$("a").click(function(evt){ $("a").removeClass("active"); $(evt.target).addClass("active"); });Me gustaría sugerir un enfoque más correcto, con el mismo resultado:
$("a").on("click", function(evt){ $("a").removeClass("active"); $(evt.target).addClass("active"); }); A veces, dependiendo de lo que coloque dentro del elemento que tiene el evento vinculado, evt.target puede ser un elemento diferente al que vinculó el evento, por lo que debe asegurarse de que el elemento que diseña con la clase sea el correcto:
$("a").on("click", function(evt){ $("a").removeClass("active"); let tgt=evt.target; if(!$(tgt).is("a")) tgt = $(tgt).closest("a"); $(tgt).addClass("active"); });Después de buscar otras soluciones, encontré esto que funciona. Tiene que ver con el hecho de que la página se actualiza y se vuelve a activar en el primer elemento:
<script> $(document).ready(function() { $('a.active').removeClass('active'); $('a[href="' + location.pathname + '"]').closest('a').addClass('active'); }); </script>