html 菜單和子菜單處於活動狀態

Question

我在菜單中分配了一個活動類，但活動類並未從移動菜單中刪除，它始終保持活動狀態。 而且，如果選擇了子類別，我希望類別本身有一個活動類。 我試過了，不能。 先謝謝幫助過的朋友。

例如，如果 category1.php 頁面打開，則“category”具有停用的類。

 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是您需要的屬性。 獲得后，您可以使用.substr和.lastIndexOf找到文件名（整個路徑名的最后一部分）。

在此代碼片段中，活動項是JS的父項，我以它為例，因為這些 SO 片段的location.href是https://stacksnippets.net/js ，因此路徑名是/js ，最后，文件名是js 。

檢查代碼，你會明白我的意思

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>