Блог

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

меню html и подменю активны

#javascript #html

#javascript #HTML

Вопрос:

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

Например, если category1.php страница открыта, «категория» имеет деактивированный класс. 

 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);  
 <div class="header_side_container">
    <div class="header_builder_component">
        <nav class="main-menu">
            <ul id="menu-main-menu" class="menu">
                <li class="menu-item">
                    <a href="home.php"><span>Home</span></a>
                </li>
                <li class="menu-item">
                    <a href="#"><span>category</span></a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="Category1.php">
                                <span>Category 1</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="Category2.php">
                                <span>Category 2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="gallery.php"><span>gallery</span></a>
                </li>
                <li class="menu-item">
                    <a href="about.php"><span>about</span></a>
                </li>
                <li class="menu-item">
                    <a href="contact.php"><span>contact</span></a>
                </li>
        </nav>
    </div>
</div>

<!--Mobil-->
<nav class="mobile_menu">
    <ul id="menu-top_menu-1">
        <li class="menu-item">
            <a href="home.php"><span>Home</span></a>
        </li>
        <li class="menu-item">
            <a href="#"><span>category</span></a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="Category1.php">
                        <span>Category 1</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="Category2.php">
                        <span>Category 2</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="gallery.php"><span>gallery</span></a>
        </li>
        <li class="menu-item">
            <a href="about.php"><span>about</span></a>
        </li>
        <li class="menu-item">
            <a href="contact.php"><span>contact</span></a>
        </li>
    </ul>
</nav>

Ответ №1:

окно.Расположение.pathname — это нужное вам свойство. Как только у вас это получится, вы можете найти имя файла (последнюю часть полного пути) с помощью .substr и .lastIndexOf .

В этом фрагменте кода активный элемент является родительским для JS , я использовал это в качестве примера, так как location.href для этих SO-фрагментов являетсяhttps://stacksnippets.net/js , следовательно, путь — /js, и, наконец, имя файла — js.

Проверьте код, и вы поймете, что я имею в виду

ПРИВЕТ

 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(anchor.href.indexOf(url) > -1) {
        const parentLI = $(li).parents('.menu-item').get(0)
        if(parentLI)
          parentLI.classList.add("active");
        else 
          li.classList.add("active");
      } 
   });
}

const pathname = window.location.pathname, filename=pathname.substr(pathname.lastIndexOf('/')   1);


updateMenu(filename);  
 li.active > a span{
  font-weight: bold !important;
  color: red
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header_side_container">
    <div class="header_builder_component">
        <nav class="main-menu">
            <ul id="menu-main-menu" class="menu">
                <li class="menu-item">
                    <a href="home.php"><span>Home</span></a>
                </li>
                <li class="menu-item">
                    <a href="#"><span>category</span></a>
                    <ul class="sub-menu">
                        <li class="menu-item">
                            <a href="Category1.php">
                                <span>Category 1</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="js">
                                <span>JS</span>
                            </a>
                        </li>
                        <li class="menu-item">
                            <a href="Category2.php">
                                <span>Category 2</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item">
                    <a href="gallery.php"><span>gallery</span></a>
                </li>
                <li class="menu-item">
                    <a href="about.php"><span>about</span></a>
                </li>
                <li class="menu-item">
                    <a href="contact.php"><span>contact</span></a>
                </li>
                </ul>
        </nav>
    </div>
</div>

<!--Mobil-->
<nav class="mobile_menu">
    <ul id="menu-top_menu-1">
        <li class="menu-item">
            <a href="home.php"><span>Home</span></a>
        </li>
        <li class="menu-item">
            <a href="#"><span>category</span></a>
            <ul class="sub-menu">
                <li class="menu-item">
                    <a href="Category1.php">
                        <span>Category 1</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="js">
                        <span>JS too</span>
                    </a>
                </li>

                <li class="menu-item">
                    <a href="Category2.php">
                        <span>Category 2</span>
                    </a>
                </li>
            </ul>
        </li>
        <li class="menu-item">
            <a href="gallery.php"><span>gallery</span></a>
        </li>
        <li class="menu-item">
            <a href="about.php"><span>about</span></a>
        </li>
        <li class="menu-item">
            <a href="contact.php"><span>contact</span></a>
        </li>
    </ul>
</nav>

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

1. Спасибо за ваш ответ, но активный класс не удаляется. Активный остается во всех классах li.

2. @MesutBla active класс не обязательно удалять из любого элемента списка (я не удалял это первым if , потому что я не хотел слишком сильно изменять вашу функцию, но это вообще не нужно), вам это нужно только if в случае, если вы создаете SPA, что, я думаю, не так. если это традиционный поток перезагрузки при каждом запросе, то active класс теряется при каждой перезагрузке. вам нужно только установить его обратно на правильный пункт в меню, и этого вы можете достичь с помощью window.location.pathname prop. такое поведение сложно эмулировать во фрагменте SO, потому что сервер не работает с