Изменение цвета ссылки на текущую страницу с помощью CSS

Управление внешним видом ссылки на текущую страницу является общим требованием к стилю CSS. Чтобы отличить ее от ссылок на другие страницы, пользователи часто предпочитают менять цвета текста и фона. Вот комплексное решение для вашего запроса на стилизацию:

Стилизация CSS

Чтобы стилизовать ссылку на текущую страницу, добавьте в таблицу стилей следующие правила CSS:

li a {
  color: #A60500;
}

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

Скрипт jQuery

Предоставленный скрипт jQuery позволяет идентифицировать ссылку на текущую страницу и динамически добавлять к ней класс:

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

В зависимости от конкретной структуры страницы вам может потребоваться уточнить селектор ссылок ($("[href]")). Например, если ссылки содержатся в элементе nav, вы можете сузить выбор до $("nav [href]").

Если на вашей странице используются параметры URL, вы можете удалить их перед сравнением ссылки, чтобы убедиться, что ссылка на текущую страницу распознана:

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

Этот подход устраняет необходимость изменять стиль CSS для каждой страницы индивидуально.