javascript - 如何使用 JavaScript 将活动类放在页面位置

Question

我正在尝试在我的导航菜单上添加活动类，因此有一个边框，并且您所在的特定页面的文字是彩色的，但它不起作用。它适用于主要导航，但不适用于我的次要导航，任何关于它为什么不工作的想法将不胜感激，谢谢？我的代码在下面。底部的活动类是应该应用的

const currentLocations = location.href;
const menuItems = document.querySelectorAll('.secondary a');
const menuLengths = menuItems.length
for (let i = 0; i < menuLengths; i++) {
  if (menuItems[i].href === currentLocations) {
    menuItems[i].className = "active"
  }
}

.secondarynav-item-trading {
  position: relative;
  margin-top: 10px;
  padding: 15px 5px;
  width: 1430px;
  top: 13px;
  left: 30px;
}

.secondarynav-item-trading a {
  display: inline-block;
  text-decoration: none;
  color: black;
  font-size: 14px;
  text-align: center;
  padding: 10px;
  border-radius: 20px;
  width: 190px;
}

.secondarynavigation-item-trading ul {
  list-style: none;
}

.secondarynavigation-item-trading li {
  display: inline-block;
  margin-top: 0;
}

.secondarynavigation-item-trading a:hover {
  color: #fd886b;
  border: 1px solid #fd886b;
  font-weight: bold;
}

.secondarynavigation-item-trading a:hover::before {
  width: 100%;
}

.secondarynav-item-trading ::after {
  content: "";
  display: table;
  clear: both;
}

.secondarynavigation-item-trading a::before {
  content: "";
  display: block;
  height: 5px;
  background-color: #fd886b;
  position: relative;
  top: 40px;
  width: 0%;
  transition: all ease-in-out 250ms;
}

.secondary a.active {
  color: #fd886b;
  border: 1px solid #fd886b;
  font-weight: bold;
}

<header class="secondarynav-messages">
  <div class="secondary">
    <!-- secondary navigation for homepage -->
    <nav alt="secondarynavigation-messages" id="secondarynavigation-messages">
      <!-- secondary navigation buttons below the main navigation -->
      <ul class="secondarynavigation-messages" id="secondarynavigation-messages">
        <li><a href="messages-inbox.php" id="inbox-active" class="inbox-active">Inbox</a></li>
        <li><a href="messages-sent.php" class="sent-active">Sent</a></li>
        <li><a href="messages-compose-a-message.php">Compose a message</a></li>
        <li><a href="messages-drafts.php" class="drafts-active">Drafts</a></li>
        <li><a href="messages-archived.php" class="archived-active">Archived</a></li>
      </ul>
    </nav>
  </div>
</header>

我在上面的代码中使用它的方式适用于第一页，但其他都没有，但我在主导航中做了完全相同的事情并且它有效我还在一个新的网站文档上复制了代码并且它有效，但是对于某些原因它在这里不起作用

标签： javascripthtmlcss