Подсветка активных ссылок на чистом JavaScript
Хорошей практикой считается подсвечивать текущую ссылку, чтобы показать пользователю, где он находится в данный момент.
Использовать для этого ресурсы сервера не оправдано. Исключением являются кешируемые на долгое время страницы или статические страницы. В остальных случаях серверу должно быть наплевать на то, какую страницу отправили пользователю. Как минимум в контент лезть ему не надо, чтоб указать класс активной ссылке. Это задача клиента, т.к. он сам запросил нужную страницу.
Решение в несколько строчек нисколько не будет нагружать клиента, отработает быстро. Скрипт можно вставлять прямо после навигационного меню например, если другие ссылки не нужно подсвечивать.
const doc = window.document;
const links = doc.querySelectorAll("a"); // любой нужный селектор
const linksCount = links.length;
const currentURL = doc.URL;
for (let i = 0; i < linksCount; i++) {
let linkURL = links[i].href;
// linkURL == currentURL, если не надо светить уровни выше
if (currentURL.startsWith(linkURL)) {
links[i].classList.add("active");
}
}
Современное краткое решение:
(function() {
[...this.querySelectorAll("a")]
.filter(a => this.URL.startsWith(a.href))
.forEach(a => a.classList.add("active"));
}.bind(window.document)());
Останется только назначить стили активным ссылкам с классом active
.