0

espero una ayuda de su parte resulta que tengo un Nav hecho con bootstrap quiero que al clickear un anchor me añada la clase active por mas que intento no me sale aqui dejo el fragmento de mi codigo.

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
        <a class="navbar-brand" href="#">Empresa ABC</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav mr-auto" id="menu">
                <li class="nav-item">
                    <a class="nav-link" href="index.php">Inicio</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="usuarios.php">Usuarios</a>
                </li>
            </ul>          
        </div>
    </nav>

<script>
$(function() {      
  var menus = $(".nav-link");    
  menus.click(function() {
     menus.removeClass("active");
     $(this).addClass("active");
  });
});
</script>
2
  • Ya revisaste esto? es.stackoverflow.com/search?q=active+menu Por favor revisa: Cómo preguntar Commented el 2 dic. 2022 a las 21:39
  • 1
    Cuando el usuario hace click sobre un link, la pagina rediríge a la url indicada y se carga nuevamente, con lo cual el efecto de agregar la clase activa se perdió. Para que esto funcione tendrías que leer la url y según sea la ubicación aplicar al link cuyo href coincida con la porción final de la url, la clase activa. Aca tenes una pregunta similar cuyas respuestas deberían solucionar tu problema: stackoverflow.com/questions/20060467/…
    – Farid
    Commented el 3 dic. 2022 a las 12:06

1 respuesta 1

1

Para añadir la clase "active" al enlace correspondiente según la página en la que se encuentra el usuario, se puede usar el siguiente código JavaScript:

$(function() {
  var menus = $(".nav-link");
  var currentPage = location.pathname;

  menus.each(function() {
    var menu = $(this);
    var menuUrl = menu.attr("href");

    if (menuUrl === currentPage) {
      menu.addClass("active");
    }
  });
});

Este código selecciona todos los enlaces del menú que tienen la clase "nav-link", y luego recorre cada uno de ellos para determinar si su atributo "href" coincide con la ruta de la página actual. Si coincide, se añade la clase "active" al enlace correspondiente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.