Question

0

103

Views

Trying to add class to div element, but wont work

Can anyone advice me why the allTabs forEach wont work when I am trying to add the .none class ? When clicking second item the other class should disappear but it doesn't,

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>

7 months ago · Juan Pablo Isaza

2 answers

Answer question

0

if you look at the inspector, the class none is always present.

7 months ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T17:05:39.139Z

A better approach is just to remove the none class on the current tab. You won't need the block class.

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>