¿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.