Pure Tab Navigation for JS

Fiddle KG

by Kirubel Girma

HTML

<a href="#orange" data-tab="orange" class="b-nav-tab active">Orange</a>
<a href="#green" data-tab="green" class="b-nav-tab">Green</a>
<a href="#blue" data-tab="blue" class="b-nav-tab">Blue</a>

<div id="orange" class="b-tab active">
  Orange tab content
</div>

<div id="green" class="b-tab">
  Green tab content
</div>

<div id="blue" class="b-tab">
  Blue tab content
</div>

<button id="greenAc">Switch to green</button>

CSS

@keyframes opIn {
  0% {opacity: 0;}
  50% {display: inline-block;}
  100% {top: 200px;}
}

.b-tab {
  padding: 20px;
  border: 1px solid #000;
  display: none;
  animation-name: opIn;
  animation-duration: 1s;
}

.b-tab.active {
  opacity: 1;
  display: block;
}

.b-nav-tab {
  display: inline-block;
  padding: 20px;
}

.b-nav-tab.active {
  color: #ff4200;
}

JavaScript

'use strict';

function Tabs() {

  var bindAll = function() {
    var menuElements = document.querySelectorAll('[data-tab]');
    for (var i = 0; i < menuElements.length; i++) {
      menuElements[i].addEventListener('click', change, false);
    }
  }

  var clear = function() {
    var menuElements = document.querySelectorAll('[data-tab]');
    for (var i = 0; i < menuElements.length; i++) {
      menuElements[i].classList.remove('active');
      var id = menuElements[i].getAttribute('data-tab');
      document.getElementById(id).classList.remove('active');
    }
  }

  var change = function(e) {
    clear();
    e.target.classList.add('active');
    var id = e.currentTarget.getAttribute('data-tab');
    document.getElementById(id).classList.add('active');
  }

  bindAll();

  document.getElementById('greenAc').addEventListener('click', function greenBut() {
    clear();
    document.getElementById('green').classList.add('active');
  });
  
  
}

var connectTabs = new Tabs();