html 菜单和子菜单处于活动状态

Question

I assign an active class in my menu, but the active class is not removed from the mobile menu, it always remains active. And also, if the subcategory is selected, I want the category itself to have an active class. I tried, I couldn't. Thank you in advance to the friends who helped.

For example, if category1.php page is open, "category" has the deactivated class.

 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>

Answer 1

window.location.pathname is the property you need. Once you have it, you can find the filename (last part of the whole pathname) by using .substr and .lastIndexOf .

In this code snippet, the active item is the parent of JS , I used that as an example since the location.href for these SO snippets is https://stacksnippets.net/js , hence the pathname is /js , and finally, the filename is js .

Check the code and you'll see what I mean

HIH

 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>