Configuración de un elemento de menú activo basado en la URL actual con jQuery

Este problema aparece una y otra vez al crear sitios web: ¿Cómo puedo determinar la ubicación actual del usuario para poder resaltar la sección activa en el menú de navegación? Es una necesidad tan básica, pero la solución parece reinventarse en cada nueva construcción.

Hay dos rutas principales que puede tomar para resolver este problema de manera dinámica, del lado del servidor y del lado del cliente. Resolver esto en el lado del servidor es bueno porque tendrá un mejor manejo de la página que se solicita, pero no siempre es práctico. Con un poco de planificación, es bastante sencillo resolver esto en el lado del cliente usando JavaScript (y opcionalmente jQuery).

Supongamos que tiene un menú de navegación básico en su encabezado y desea cambiar el color de fondo de la página actual en la que se encuentra.

Idealmente, cuando haces clic en Tour y te llevan a la página Tour, te gustaría que el menú reflejara tu ubicación actual.

Para hacer esto usando jQuery, vamos a comparar el atributo href de cada enlace de menú con la URL del navegador actual e intentaremos encontrar una coincidencia. Si se encuentra una coincidencia, configuraremos ese elemento como activo agregando una clase a la

  • elemento.

    El resultado neto de este ejemplo muy básico se ve así

    En cada página de carga, este script se ejecuta y compara el href de cada enlace de menú con la URL de la página actual comenzando después del nombre de dominio y continuando hacia adelante para tantos caracteres como existan en el href (similar a una función startsWith ()). Esto permite que cualquier subpágina de "Tour" también marque Tour como la sección activa, por ejemplo, /tour/section2.html. Cuando se encuentra una coincidencia, el elemento padre, en este caso un

  • - tiene una clase de "activo" agregado.

    Esta solución se puede encontrar en jsFiddle para su uso y también se incluye a continuación. Lo principal que deberá cambiar para sus propias necesidades es el selector ".nav" en la línea 9 de JavaScript. Esto debe modificarse para seleccionar el elemento de navegación que desea procesar.

    Tenga en cuenta que el ejemplo de jsFiddle no funcionará porque en realidad no puede cambiar la URL en la ventana de resultados, pero puede copiar fácilmente el código en un archivo HTML para probarlo.