Alterando a cor do link da página atual com CSS

Manipular a aparência do link da página atual é um requisito comum de estilo CSS. Para distingui-lo de outros links de páginas, os usuários geralmente preferem trocar as cores do texto e do plano de fundo. Aqui está uma solução abrangente para sua solicitação de estilo:

Estilo CSS

Para estilizar o link da página atual, adicione as seguintes regras CSS à sua folha de estilo:

li a {
  color: #A60500;
}

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

jQuery Script

O script jQuery fornecido permite que você identifique o link da página atual e adicione dinamicamente uma classe a ele:

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

Dependendo da estrutura específica da sua página, pode ser necessário refinar o seletor de links ($("[href]")). Por exemplo, se os links estiverem contidos em um elemento nav, você poderá restringir a seleção para $("nav [href]").

Se sua página usar parâmetros de URL, você poderá removê-los antes de comparar os links para garantir que o link da página atual seja reconhecido:

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

Essa abordagem elimina a necessidade de modificar o estilo CSS de cada página individualmente.