时间戳

首页 > 解决方案 > 单击子菜单Javascript时如何将活动类添加到菜单中？

javascript - 单击子菜单Javascript时如何将活动类添加到菜单中？

问题描述

当我单击其子菜单时，我尝试将活动类添加到菜单中。我在下面有菜单引导菜单。

// 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>

即使我单击其子菜单并重定向到任何页面，我也想让父菜单处于活动状态。任何人都可以帮忙，好吗？

标签： javascripthtmlcss

解决方案

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

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>



一些有用的资源


推荐阅读