Блог

Главная - Вопросы по программированию - Меню nav li активное удаление

Меню nav li активное удаление

#javascript #html

#javascript #HTML

Вопрос:

Я хочу назначить «активный» класс меню. Активный клип выбрасывается, но не удаляется. Я не понимаю, почему вы не удалили. Заранее благодарю тех, кто может помочь. Ошибки нет, меня удивляет, что она не удаляется таким образом

 <ul id="avia-menu" class="menu av-main-nav">
    <li id="menu-item" class="menu-item">
        <a href="home">
            <span class="avia-bullet"></span>
            <span class="avia-menu-text">Home</span>
            <span class="avia-menu-fx">
                <span class="avia-arrow-wrap">
                    <span class="avia-arrow"></span>
                </span>
            </span>
        </a>
    </li>
    <li id="menu-item" class="menu-item">
        <a href="about">
            <span class="avia-bullet"></span>
            <span class="avia-menu-text">About</span>
            <span class="avia-menu-fx">
                <span class="avia-arrow-wrap">
                    <span class="avia-arrow"></span>
                </span>
            </span>
        </a>
    </li>
    <li id="menu-item" class="menu-item">
        <a href="contact">
            <span class="avia-bullet"></span>
            <span class="avia-menu-text">Contact</span>
            <span class="avia-menu-fx">
                <span class="avia-arrow-wrap">
                    <span class="avia-arrow"></span>
                </span>
            </span>
        </a>
    </li>
</ul>
  
 function updateMenu(url) {
        const active = document.querySelector('#menu-item.active');

        if (active !== null) {
            active.classList.remove('active');
        }

        const links = Array.from(document.querySelectorAll('#menu-item'));

        links.forEach(function (li) {
            let anchor = li.querySelector("a");
            if (url.indexOf(anchor.href) > -1) {
                li.classList.add("active");
            }
        });
    }
    updateMenu(window.location.href);

Комментарии:

1. Я рекомендую вам использовать jQuery, чтобы сделать его более динамичным и простым

2. Это должно сработать, но вы могли бы сэкономить запрос, просто добавив удаление в цикл if (url.indexOf(anchor.href) > -1) {li.classList.add("active");} else {li.classList.remove('active');}

3. Я не мог знать, потому что информации о моем запросе очень мало. Я буду рад, если вы поможете

4. Можно ли сделать его более динамичным и простым с помощью jquery?

5. Вам не нужен jQuery

Ответ №1:

Вы можете упростить свою функцию, объединив .add("active") .remove("active") вызовы и внутри вашего цикла. Это экономит ваш запрос и позволяет избежать ненужного сброса и сброса класса для одного и того же элемента.

Вам также не нужен Array.from() вызов.

 function updateMenu(url) {

  const links = document.querySelectorAll('#menu-item');

  links.forEach(li => {
    let anchor = li.querySelector("a");
    if (url.indexOf(anchor.href) > -1) {
      li.classList.add("active");
    } else {
      li.classList.remove("active");
    }
  });
  
  
}

updateMenu(window.location.href);