使用 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>