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

Question

[Sol-Mayers]

Доброй ночи. Задача следующая - необходимо с помощью чистого 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');
    }
});

Comments

[McBernar]

Сделайте консоль лог getattribute.
Сделайте консоль лог indexof

Проверьте, что все совпадает.

Вы это сделали или сразу сюда написали?

[McBernar]

a href="photo.html" class="item__link desktop-link active-desktop-link"

Все работает. Ищите в другом месте проблему.

[Sol-Mayers]

McBernar, спасибо за ответ. Напиши поподробнее, пожалуйста - куда это нужно прописывать? В функцию или в условие? Я с джаваскриптом пока не очень дружу, только основы постигаю.

[McBernar]

Sol-Mayers, в смысле? Нет, ваш код работает — он добавляет класс к тегу. Проблема в другом месте каком-то.

[Sol-Mayers]

McBernar, Вроде, решил проблему. Но, самое смешное - не понял как именно)

Короче, прописал сразу active-desktop-link в разметке. На странице с фото прописал класс active-desktop-link только пункту ФОТО. На странице с конкурсом прописал класс только КОНКУРСУ. И на главной странице прописал класс только ГЛАВНОЙ. Всё работает.
Вот так:

Главная

<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 active-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>

фото

<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 active-desktop-link">Фотографии</a>
        </li>
        <li>
          <a href="form.html" class="item__link desktop-link">Конкурс</a>
        </li>
      </ul>

конкурс

<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 active-desktop-link">Конкурс</a>
        </li>
      </ul>

[profesor08]

А нечистый js церковь запретила? xDD

[Sol-Mayers]

profesor08, Задание такое, просто) JQuery использовать нельзя.

[profesor08]

Sol-Mayers, ну так раз задание, значит оно основано на изученном ранее материале. Если не справляешься, значит не учил, а лентяям зашкварно должно быть помогать.

[Sol-Mayers]

profesor08, Зашкварно писать такие комментарии, которые ты пишешь) По теме ничего сказать не смог, решил остроумием блеснуть, юморист)

[historydev]

Sol-Mayers, так, а ты решил простейшую задачу с фриланса перекинуть на нас? Губа не дура) А если задание дали в унике, то иди учись)

[profesor08]

Sol-Mayers, с заданиями - на фриланс за деньги

[Sol-Mayers]

Владимир, Это дополнительное задание, которое можно сделать. Оно не обязательное, так как мы это ещё не проходили.

[Сергей Горячев]

Sol-Mayers, похоже, что в таком виде оно у вас и без js будет работать. :)
Почитайте про отладку js в Chrome или в FF, реально гораздо проще будет искать проблемы.

Answer 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");
        }