Михаил Юдин

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

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

Ещё почитать

Нет фото

Parsee - простой вкусный парсер сайтов

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

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

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

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

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

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

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

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

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

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