@Sol-Mayers

Как выделить текущий пункт меню на чистом js?

Доброй ночи. Задача следующая - необходимо с помощью чистого js сделать выделение текущего пункта меню. Что-бы текущая страница подчёркивалась снизу. На настоящий момент проблема в том, что выделение работает только на первом пункте меню, то есть на главной странице. На других пунктах меню выделение не работает. В чём может быть проблема?
Вот код:
<ul class="menu__list-desktop">
        <li>
          <a href="index.html" class="item__link--desktop">
            <img src="img/logo-pink-white-desktop.svg" alt="main-logo">
          </a>
        </li>
        <li>
          <a href="index.html" class="item__link desktop-link">Главная</a>
        </li>
        <li>
          <a href="photo.html" class="item__link desktop-link">Фотографии</a>
        </li>
        <li>
          <a href="form.html" class="item__link desktop-link">Конкурс</a>
        </li>
      </ul>


.active-desktop-link {
  border-bottom: 2px solid #ffffff;
}


document.querySelectorAll('.desktop-link').forEach(function(el) {
    if ( window.location.pathname.indexOf(el.getAttribute('href')) > -1 ) {
        el.classList.add('active-desktop-link');
    }
});
  • Вопрос задан
  • 224 просмотра
Пригласить эксперта
Ответы на вопрос 1
@EvgeniySaschenko
Добавь тегу body атрибут data-id-page="индификатор_страницы"
Добавь элементу навигации data-id-nav="индификатор_страницы"

<body data-id-page="photo">
    <ul class="menu__list-desktop">
        <li>
          <a href="index.html" class="item__link--desktop">
            <img src="img/logo-pink-white-desktop.svg" alt="main-logo">
          </a>
        </li>
        <li>
          <a href="index.html" class="item__link desktop-link" data-id-nav="index">Главная</a>
        </li>
        <li>
          <a href="photo.html" class="item__link desktop-link" data-id-nav="photo">Фотографии</a>
        </li>
        <li>
          <a href="form.html" class="item__link desktop-link" data-id-nav="form">Конкурс</a>
        </li>
      </ul>
</body>


let pageId = document.querySelector("[data-id-page]").getAttribute("data-id-page"),
            navItem = document.querySelector(`[data-id-nav=${pageId}]`);

        if(pageId == navItem.getAttribute("data-id-nav")) {
            navItem.classList.add("active-desktop-link");
        }
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Stream Labs Москва
До 150 000 ₽
Myagi Минск
от 3 000 до 4 000 $
Salesbeat Москва
от 150 000 до 250 000 ₽
17 февр. 2020, в 23:30
1100 руб./за проект
17 февр. 2020, в 19:40
500 руб./за проект
17 февр. 2020, в 19:36
5000 руб./за проект