Как реализовать табы на чистом Javascript

Разберем решение популярной задачи в веб-разработке – создание табов. Мы хотим чтобы они были реализованы без использования фреймворков вроде Bootstrap и jQuery, только чистый Javascript.

Как и обычно, напишем HTML табов:

<div class="nav-tabs">
  <a href="#" data-tab="1" class="nav-tab active">Tab 1</a>
  <a href="#" data-tab="2" class="nav-tab">Tab 2</a>
  <a href="#" data-tab="3" class="nav-tab">Tab 3</a>
</div>
<div class="tab-content">
  <div data-tab-content="1" class="tab-pane active">
    Tab content 1
  </div>
  <div data-tab-content="2" class="tab-pane">
    Tab content 2
  </div>
  <div data-tab-content="3" class="tab-pane">
    Tab content 3
  </div>
</div>

Добавим CSS:

body{
  color: #666666;
}
a{
  color: #666666;
}
.nav-tabs{
  display: flex;
}
.nav-tab{
  font-size: 20px;
  margin-right: 10px;
  padding: 20px 30px 20px 30px;
  border: 2px solid#eeeeee;
  border-bottom: 0;
  text-decoration: none;
}
.nav-tab.active{
  background: #eeeeee;
  cursor: default;               
}
.tab-content{
  font-size: 20px;
  background: #eeeeee;
}
.tab-pane{
  display: none;
  padding: 30px;
}
.tab-pane.active{
  display: flex;
}

А теперь реализуем логику.

var tabNavs = document.querySelectorAll(".nav-tab");
var tabPanes = document.querySelectorAll(".tab-pane");

for (var i = 0; i < tabNavs.length; i++) {

  tabNavs[i].addEventListener("click", function(e){
    e.preventDefault();
    var activeTabAttr = e.target.getAttribute("data-tab");

    for (var j = 0; j < tabNavs.length; j++) {
      var contentAttr = tabPanes[j].getAttribute("data-tab-content");

      if (activeTabAttr === contentAttr) {
        tabNavs[j].classList.add("active");
        tabPanes[j].classList.add("active"); 
      } else {
        tabNavs[j].classList.remove("active");
        tabPanes[j].classList.remove("active");
      }
    };
  });
}

Идея в том, чтобы сравнивать data-атрибут целевого таба с data-атрибутом его содержимого. Если они совпадают содержимому присваиваем класс active, а все остальное скрываем.