Tengo la siguiente navegación en la página de la galería de mi sitio web que permite a los usuarios filtrar las imágenes por categoría.
<ul> <li><a href="/gallery/" class="active">All</a></li> <li><a href="/gallery/our-gym/">Our Gym</a></li> <li><a href="/gallery/our-classes/">Our Classes</a></li> <li><a href="/gallery/our-coaches/">Our Coaches</a></li> </ul>Agregué el siguiente fragmento para agregar la clase 'activa', la categoría que el usuario está viendo actualmente.
<script> jQuery(function($) { var path = window.location.href; $('.gallery_listing_wrapper li a').each(function() { if (this.href === path) { $(this).addClass('active'); } }); }); </script>Esto funciona para la navegación de la galería anterior, sin embargo, una vez que navego usando la paginación, no funciona.
La URL de la paginación es ligeramente diferente a la galería y sus categorías.
Por ejemplo, en lugar de /gallery/our-gym/ - page/ y el número de página se agrega a la URL, es decir, /gallery/page/2/
¿Es posible ajustar el fragmento anterior para mantener la clase activa en Todo cuando se usa la paginación?
Siempre puede agregar la clase al botón "Todos" si ninguno de los otros botones coincide con la URL actual.
<script> jQuery(function($) { var path = window.location.href; let match = $(`.gallery_listing_wrapper li a[href="${path}"]`); if(match.length >= 1) match.addClass("active"); else $(".gallery_listing_wrapper li a[href='/gallery/']").addClass("active"); }); </script>