Как добавить класс active при переходе на другую страницу html?

Question

[poles1469]

Есть меню:

<ul class="nav">
     <li class="nav__item"><a class="link__item" href="aboutus.html">о компании</a></li> 
     <li class="nav__item"><a class="link__item" href="services.html">услуги</a></li>
     <li class="nav__item"><a class="link__item" href="information.html">информация</a></li>
     <li class="nav__item"><a class="link__item" href="news.html">новости</a></li>
     <li class="nav__item"><a class="link__item" href="">отзывы</a></li>
     <li class="nav__item"><a class="link__item" href="discounts.html">скидки</a></li>
     <li class="nav__item"><a class="link__item" href="contacts.html">Контакты</a></li> 
</ul>

Хочу, чтобы при переходе на другую страничку, добавлялся класс "menu__item__active".

Вот код Js:

let navItem = document.querySelectorAll('.nav__item')

navItem.forEach((el) => {
   el.addEventListener('click', () => {
      navItem.forEach(el => {
         el.classList.remove('menu__item__active')
      })
      el.classList.add('menu__item__active')
   })
})

Внутренняя функция для того, что бы при новом клике убирались все остальные стили "menu__item__active". Если вместо ссылок на файлы, поставить заглушку, то все работает, но если поставить путь к любому другому файлу, стили не применяются. В чем проблема?

Answer 1

[Rsa97]

Дык после перехода на другую страницу это уже совершенно другие элементы и класс, применённый на предыдущей странице, никакого значения не имеет.
Либо передавайте класс из бэкенда, либо (если он статический) в цикле сравнивайте url страницы (window.location.pathname) с href ссылки и ставьте класс при совпадении.

Comments

[poles1469]

как сложно и не понятно ...