Подсветка активных ссылок на чистом JavaScript

Подсветка активных ссылок на чистом JavaScript
Выключите пожалуйста блокировку рекламы для этого сайта чтобы поддержать проект

Хорошей практикой считается подсвечивать текущую ссылку, чтобы показать пользователю, где он находится в данный момент.

Использовать для этого ресурсы сервера не оправдано. Исключением являются кешируемые на долгое время страницы или статические страницы. В остальных случаях серверу должно быть наплевать на то, какую страницу отправили пользователю. Как минимум в контент лезть ему не надо, чтоб указать класс активной ссылке. Это задача клиента, т.к. он сам запросил нужную страницу.

Решение в несколько строчек нисколько не будет нагружать клиента, отработает быстро. Скрипт можно вставлять прямо после навигационного меню например, если другие ссылки не нужно подсвечивать.

const doc = window.document
const linksCount = doc.links.length 
for (let i = 0; i < linksCount; i++)
  if(doc.URL.startsWith(doc.links[i].href))
    doc.links[i].classList.add('active') 

Останется только назначить стили активным ссылкам с классом active.


Опубликовано

Выключите пожалуйста блокировку рекламы для этого сайта чтобы поддержать проект

Автор:

Я фронтенд разработчик, веду блог о вёрстке сайтов, оптимизации веб-приложений. Улучшаю пользовательский опыт, собираю лучшие практики в области веб-разработки.


Чтобы не пропускать новости, можно подписаться на email рассылку.

Если остались вопросы или есть пожелания или замечания — пишите в комментарии: