單擊子菜單 Javascript 時，如何將活動 class 添加到菜單？

Question

當我單擊其子菜單時，我嘗試將活動的 class 添加到菜單中。 我在下面有菜單引導菜單。

 // active navigation const currentLocation = location.href; const menuItem = document.querySelectorAll('.nav-link'); const menuLength = menuItem.length; for (let i = 0; i < menuLength; i++) { if (menuItem[i].href === currentLocation) { menuItem[i].classList.add("active"); } }

 .active { color: #FF0000; border-bottom: 2px solid #FF0000; }

 <ul class="navbar-nav m-auto"> <li class="nav-item "> <a class="nav-link active" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item " href="about.html">About me</a> <a class="dropdown-item" href="myportfolio.html">My portfolio</a> <a class="dropdown-item" href="contact.html">Contact</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="demo.html">Demo</a> </li> </ul>

即使我單擊其子菜單並重定向到任何頁面，我也想讓父菜單處於活動狀態。 任何人都可以幫忙，好嗎？

Answer 1

您需要使用addEventListener添加click event ...

---

 const dropdown = document.querySelector("#navbarDropdownMenuLink"); const dropdownItem = document.querySelectorAll(".dropdown-item"); for (let i = 0; i < dropdownItem.length; i++) { dropdownItem[i].addEventListener("click", function() { dropdown.classList.add("active"); }); }

 .active { color: #FF0000; border-bottom: 2px solid #FF0000; }

 <ul class="navbar-nav m-auto"> <li class="nav-item "> <a class="nav-link active" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item " href="#">About me</a> <a class="dropdown-item" href="#">My portfolio</a> <a class="dropdown-item" href="#">Contact</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Demo</a> </li> </ul>

---

一些有用的資源

• .addEventListener() 文檔

• 點擊事件文檔

Answer 2

我想您想在菜單中單擊后重新加載/重定向頁面后激活包含該位置鏈接的菜單。 這應該做到這一點（片段“假貨” location ）。 使用URL api比較與當前位置的鏈接。

 // active navigation const fakeLocation = new URL("/myportfolio.html", "https://example.com/").pathname; // ^ this would be location.pathname in your code // loop the menu-li's document.querySelectorAll('li.nav-item').forEach(link => { const links = [...link.querySelectorAll("a")]; // ^ find all links within the menu link.classList.remove("active"); // ^remove all 'active' links.forEach(lnk => lnk.classList.remove("active")); // ^ remove all 'active' from a.href too const shouldBeActive = links.find(lnk => new URL(lnk.href).pathname === fakeLocation); // ^ find the href (path) that equals the current path // note: to find the path of lnk we use the URL api // if element is found, 'activate' the href and the parent li if (shouldBeActive) { shouldBeActive.classList.add("active"); shouldBeActive.closest("li").classList.add("active"); } });

 .active { color: #FF0000; border-bottom: 2px solid #FF0000; background-color: #eee; }

 <base href="https://example.com/"> <ul class="navbar-nav m-auto"> <.-- currently active --> <li class="nav-item active"> <a class="nav-link active" href="index.html">Home</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> About </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item " href="about.html">About me</a><br> <a class="dropdown-item" href="myportfolio.html">My portfolio</a><br> <a class="dropdown-item" href="contact.html">Contact</a><br> </div> </li> <li class="nav-item"> <a class="nav-link" href="demo.html">Demo</a> </li> </ul>