Михаил Юдин

Подсветка активных ссылок на чистом 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 рассылку.


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

Ещё почитать

Чеклист оптимизации скорости загрузки веб-приложения ✓

Чеклист оптимизации скорости загрузки веб-приложения ✓

Переход с PHPStorm или Intellij IDEA на VIM

Переход с PHPStorm или Intellij IDEA на VIM

Рендер текстовых шаблонов по данным из массива PHP

Рендер текстовых шаблонов по данным из массива PHP

Битва титанов: normalize.css против reset.css

Битва титанов: normalize.css против reset.css

CSS ищет баги в SEO: картинки без alt и внешние ссылки

CSS ищет баги в SEO: картинки без alt и внешние ссылки

Системные шрифты для веб 2019

Системные шрифты для веб 2019