javascript - 使用 JavaScript 替换活动类无法正常工作

Question

当您选择另一个链接时，它不会删除活动类。它也不会将活动类添加到“单击”链接。

Home 是默认类，点击第三个类。

我试过没有“;” 在脚本的末尾，但仍然显示相同。

这是我的代码：

let navItem = document.querySelectorAll('ul li');
navItem.forEach((item) => {
  item.addEventListener("click", () => {
    let activeClass = document.querySelector('.active');
    activeClass.className = activeClass.className.replace(".active", "");
    item.className = "active";
  });
});

.navItems {
  display: flex;
  list-style-type: none;
}

.navItem {
  margin: 0 10px;
  text-decoration: none;
  color: rgb(32, 32, 32);
  padding: 10px 20px;
}

.navbar .active {
  color: #e54136;
  background-color: rgb(32, 32, 32);
}

<div>
  <ul class="navItems">
    <li><a href="#home" class="navItem active">HOME</a></li>
    <li><a href="#services" class="navItem">SERVICES</a></li>
    <li><a href="#projects" class="navItem">PROJECTS</a></li>
    <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
    <li><a href="#contact" class="navItem">CONTACT</a></li>
  </ul>
</div>

帮帮我！

标签： javascripthtmlcss

Answer 1

您的代码有几个问题：

• 在 CSS 中，您没有创建正确的选择器
• 在 JavaScript 中，您没有修改正确的元素

let navItem = document.querySelectorAll('ul li a');

navItem.forEach((item) => {
  item.addEventListener("click", () => {
    document.querySelector('.active').classList.remove('active')
    item.classList.add('active')
  });
});

.navItems {
  display: flex;
  list-style-type: none;
}

.navItem {
  margin: 0 10px;
  text-decoration: none;
  color: rgb(32, 32, 32);
  padding: 10px 20px;
}

.navItem.active {
  color: #e54136;
  background-color: rgb(32, 32, 32);
}

<div>
  <ul class="navItems">
    <li><a href="#home" class="navItem active">HOME</a></li>
    <li><a href="#services" class="navItem">SERVICES</a></li>
    <li><a href="#projects" class="navItem">PROJECTS</a></li>
    <li><a href="#ourTeam" class="navItem">OUR TEAM</a></li>
    <li><a href="#contact" class="navItem">CONTACT</a></li>
  </ul>
</div>