Zakładki w JS

Question

Witam,

Jak sprawić, aby w danym momencie tylko jedna zakładka posiadała klasę active, a pozostałe tej klasy nie miały?

 

http://codepen.io/Bakr1/pen/MppYKQ?editors=0010

Answer 1

Musisz dodać klasę active i dla wszystkich z rodzeństwa usunąć tą klasę.

Może jakiś kod?

Comments

http://codepen.io/Bakr1/pen/MppYKQ?editors=0010

Answer 2

var tab1 = document.querySelector(".tab1");

var tab2 = document.querySelector(".tab2");

var tab3 = document.querySelector(".tab3");

var tabAll = document.querySelectorAll(".tab");

var tabContent = document.querySelector(".tab-content");

var choosenTab;

tab1.addEventListener("click", function()
  {
    tabContent.innerHTML="1zakładka";
    updateActiveState(tab1);
  }
)

tab2.addEventListener("click", function()
  {
    tabContent.innerHTML="2zakładka";
    updateActiveState(tab2);
  }
)

tab3.addEventListener("click", function()
  {
    tabContent.innerHTML="3zakładka!";
     updateActiveState(tab3);
  }
)

function updateActiveState(activeTab){
  tabAll.forEach(function(tab)
  {
    if(tab != activeTab){
      tab.classList.remove("active");
    }
    else{
      tab.classList.add("active");
    }
  })
}

 

Dopiero gdy piszę coś w czystym JS przypominam sobie dlaczego Angular jest taki genialny ;)