使用 JavaScript 更换活动 class 无法正常工作

Question

当您 select 另一个链接时，它不会删除活动的 class。 它也不会将活动的 class 添加到“点击”链接。

Home是默认的class，点击第三个。

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

这是我的代码：

 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>

帮帮我！

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>

Answer 2

如果您想在当前设置中使用replace()方法，那么这些是要从代码中解决的问题，并且可以正常工作。

更新：代码的问题是：

1. 当您在<a>上有 class navItem时，您没有选择<a>标签，然后您在<a>标签上也被控制了active的 class。

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

2. 第二个问题在 CSS 中。 你用过。

    .navbar.active { /* which means when child of navbar is active */ color: #e54136; background-color: rgb(32, 32, 32);

   }

它应该是：

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

3. 第三个问题是您使用replace()方法替换了.active的类名，它实际上应该只active 。

    activeClass.className.replace(" active", ""); // **NOTE:** There has to be a space at the start

4. 最后，您必须使用+=为新项目更新新的 class 活动以保持navItem class 并在单击的项目上添加active class。

修改后的代码：

 let navItems = document.querySelectorAll('ul li a'); navItems.forEach((item) => { item.addEventListener("click", () => { let activeItem = document.querySelector('.active'); console.log(activeItem.textContent) activeItem.className = activeItem.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; }.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>