1

me gustaría agregar class active al menú dinámicamente, este es mi menú:

<nav class="collapse">
                                                <ul class="nav nav-pills" id="mainNav">
                                                    <li class=""><a class="nav-link active" href="index.php">Inicio</a></li>
                                                    <li class=""><a class="nav-link" href="blog.php">Blog</a></li>
                                                    <li class=""><a class="nav-link" href="nuestros-servicios.php">Nuestros servicios</a></li>
                                                    <li class="dropdown">
                                                        <a class="dropdown-item dropdown-toggle" href="recursos.php">
                                                            Recursos
                                                        </a>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="dropdown-item" href="recursos-1.php">Recurso 1</a></li>
                                                            <li><a class="dropdown-item" href="recursos-2.php">Recurso 2</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class=""><a class="nav-link" href="contactenos.php">Contáctenos</a></li>
                                                </ul>
                                            </nav>

En el enlace de Inicio está clase que quiero utilizar dinámicamente en la página donde me encuentre, de antemano muchas gracias, Pura vida.

1 respuesta 1

0

Para esto debes usar javascript, hace relativamente poco cree un script para esto, solo tienes que agregar el script a tus paginas, lo puedes hacer creando un archivo nuevo nombrándolo por ejemplo activar_menu.js;

Requiere Jquery

/**
 * Activar opcion del menu segun la url
 *
 * Optiene el pathname para saber en que pagina esta dependiendo de la url
 **/
$(document).ready(function(){
    var URLactual = window.location.pathname; //utilizada para detemrinar que tab del menu activar

    URLactual = URLactual.split('/').pop();
    URLactual = URLactual.split('.');

    $('.' + URLactual[0] ).addClass('active');

});

Ahora en tu menu solo debes agregar como clase el nombre de la url sin la extencion,ejemplo;

<nav class="collapse">
   <ul class="nav nav-pills" id="mainNav">
      <li class=""><a class="nav-link index" href="index.php">Inicio</a></li>
      <li class=""><a class="nav-link blog" href="blog.php">Blog</a></li>
      <li class=""><a class="nav-link nuestros-servicios" href="nuestros-servicios.php">Nuestros servicios</a></li>
      <li class="dropdown recursos recursos-1 recursos-2">
         <a class="dropdown-item dropdown-toggle" href="recursos.php">
         Recursos
         </a>
         <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="recursos-1.php">Recurso 1</a></li>
            <li><a class="dropdown-item" href="recursos-2.php">Recurso 2</a></li>
         </ul>
      </li>
      <li class="contactenos"><a class="nav-link" href="contactenos.php">Contáctenos</a></li>
   </ul>
</nav>

con esto en el futuro si agregas mas opciones simplemente le agregas como clase el nombre de la url.

al menos esta me funciona perfecto.

Actualización:

He cambiado el código para que funcione en javascript nativo, no es necesario usar Jquery

var URLactual = window.location.pathname; //utilizada para detemrinar que tab del menu activar

URLactual = URLactual.split('/').pop();
URLactual = URLactual.split('.');
document.querySelector('.' + URLactual[0] ).classList.add('active');
1
  • 1
    ¡Genial, funciona! Muchas gracias Albert, se lo agradezco muchísimo, Pura vida!
    – user93746
    Commented el 9 sept. 2018 a las 16:16

Tu Respuesta

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