Как добавить класс к текущей странице

Question

Необходимо чтобы при переходе со страницы на страницу класс current добавлялся на текущую страницу. При этом убирался со страницы, которая уже закрыта.

Как это сделать с помощью JS?

<div class="menu__container">
  <nav class="menu__nav">
    <ul class="menu__list list">
      <li class="menu__item">
        <a href="./index.html" class="menu__link current">ГОЛОВНА</a>
      </li>
      <li class="menu__item">
        <a href="" class="menu__link">ПОСЛУГИ</a>
      </li>
      <li class="menu__subitem">
        <a href="./modeling.html" class="menu__sublink">3D Моделювання</a>
      </li>
      <li class="menu__subitem">
        <a href="./scanning.html" class="menu__sublink">3D Сканування</a>
      </li>
      <li class="menu__subitem">
        <a href="./print.html" class="menu__sublink">3D Друк</a>
      </li>
      <li class="menu__item">
        <a href="./order.html" class="menu__link">ЗАМОВИТИ</a>
      </li>
      <li class="menu__item">
        <a href="./contacts.html" class="menu__link">КОНТАКТИ</a>
      </li>
    </ul>
  </nav>
</div>

Answer 1

Вы можете использовать ссылку на вашу страницу как опору, но вы должны будете для каждой ссылке добавить id которое будет названия файла на который ведёт ссылка.
Вот пример:

let href = window.location.href;
let currentPage = href.substring(href.lastIndexOf('/') + 1).replace('.html', '') ?? 'undefined';

let currentPageLink = document.querySelector('#' + currentPage);

if (currentPageLink) {
  currentPageLink.classList.add('current');
}

<div class="menu__container">
  <nav class="menu__nav">
    <ul class="menu__list list">
      <li class="menu__item">
        <a href="./index.html" class="menu__link current" id="index">ГОЛОВНА</a>
      </li>
      <li class="menu__item">
        <a href="./services.html" class="menu__link" id="services">ПОСЛУГИ</a>
      </li>
      <li class="menu__subitem">
        <a href="./modeling.html" class="menu__sublink" id="modeling">3D Моделювання</a>
      </li>
      <li class="menu__subitem">
        <a href="./scanning.html" class="menu__sublink" id="scanning">3D Сканування</a>
      </li>
      <li class="menu__subitem">
        <a href="./print.html" class="menu__sublink" id="print">3D Друк</a>
      </li>
      <li class="menu__item">
        <a href="./order.html" class="menu__link" id="order">ЗАМОВИТИ</a>
      </li>
      <li class="menu__item">
        <a href="./contacts.html" class="menu__link" id="scratch_1">КОНТАКТИ</a>
      </li>
    </ul>
  </nav>
</div>

БЛОГ НА HUSL

Как добавить класс к текущей странице

Ответы (1 шт):