¿Alguien puede aconsejarme por qué allTabs forEach no funcionará cuando intento agregar la clase .none ? Al hacer clic en el segundo elemento, la otra clase debería desaparecer pero no lo hace,
let allTabs = document.querySelectorAll('.none'); function setActiveTab(tab) { allTabs.forEach((tabs) => { tabs.classList.add("none") }) let singleTab = document.querySelector(`.${tab}`) singleTab.classList.toggle("block") } .none { display: none; } .block { display: block; } <div> <button onclick="setActiveTab('first')"> Test1 </button> <button onclick="setActiveTab('second')"> Test2 </button> </div> <div class="none first"> first tab </div> <div class="none second"> second tab </div>Un mejor enfoque es simplemente eliminar la clase none en la pestaña actual. No necesitarás la clase de block .
let allTabs = document.querySelectorAll('.none'); function setActiveTab(tab) { allTabs.forEach((tabs) => { tabs.classList.add("none") }) let singleTab = document.querySelector(`.${tab}`) singleTab.classList.remove("none") } .none { display: none; } <div> <button onclick="setActiveTab('first')"> Test1 </button> <button onclick="setActiveTab('second')"> Test2 </button> </div> <div class="none first"> first tab </div> <div class="none second"> second tab </div>si miras al inspector, la clase none siempre está presente.