Cambiar el color del enlace de la página actual con CSS

Manipular la apariencia del enlace de la página actual es un requisito de estilo CSS común. Para distinguirlo de los enlaces de otras páginas, los usuarios suelen preferir intercambiar los colores del texto y el fondo. Aquí tienes una solución integral para tu solicitud de estilo:

Estilo CSS

Para aplicar estilo al enlace de la página actual, agrega las siguientes reglas CSS a tu hoja de estilo:

li a {
  color: #A60500;
}

li a:hover {
  color: #640200;
  background-color: #000000;
}

jQuery Script

El script jQuery proporcionado le permite identificar el enlace de la página actual y agregarle dinámicamente una clase:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

Dependiendo de la estructura de su página específica, es posible que necesite refinar el selector de enlaces ($("[href]")). Por ejemplo, si los enlaces están contenidos dentro de un elemento de navegación, puede limitar la selección a $("nav [href]").

Si su página utiliza parámetros de URL, puede eliminarlos antes de comparar los enlaces para garantizar que se reconozca el enlace de la página actual:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

Este enfoque elimina la necesidad de modificar el estilo CSS para cada página individualmente.