Tabs

tabs.jade

//- Example: https://jsfiddle.net/f0nfnLe1/1/

.tabs
  ul.tabs-controls
    li.active First
    li Second
    li Third
    li Fourth
  ul.tabs-content
    li.active
      h4 Tab 1
      p Content 1
    li
      h4 Tab 2
      p Content 2
    li
      h4 Tab 3
      p Content 3
    li
      h4 Tab 4
      p Content 4

tabs.js

// Табы v1.0.0
//   changeButton — меняем подсветку кнопки
//   changeTab — меняем показываемый контент
//   скорость настраивается в transition в CSS

var Tabs = (function() {
  return {

    init: function() {
      this.cache();
    },



    cache: function() {
      this.tabs = document.getElementsByClassName("tabs");
      if (this.tabs) {
        this.controls = document.getElementsByClassName("tabs-controls");
        this.content = document.getElementsByClassName("tabs-content");
        this.bindEvents();
      }
    },



    bindEvents: function() {
      var self = this;

      var i;
      for (i=0; i < this.controls.length; i++) {
        var k;
        for (k=0; k < this.controls[i].children.length; k++) {
          this.controls[i].children[k].addEventListener("click", function() {
            var tabs = this.parentNode.parentNode;
            var controls = this.parentNode;
            self.changeButton(controls, this);
            self.changeTab(tabs, controls, this);
          });
        }
      }

    },



    changeButton: function(controls, but) {
      var i;
      for (i=0; i < controls.children.length; i++) {
        controls.children[i].classList.remove("active");
      }
      but.classList.add("active");
    },



    changeTab: function(tabs, controls, but) {
      var i, num;
      for (i=0; i < controls.children.length; i++) {
        if (controls.children[i] === but) {
          num = i;
        }
      }

      var content = tabs.children[1];
      var k;
      for (k=0; k < content.children.length; k++) {
        content.children[k].classList.remove("active");
      }

      content.children[num].classList.add("active");
    }

  }
})();

tabs.styl

.tabs
  background #eee
  .tabs-controls
    padding 10px 10px 0 10px
    li
      background #ddd
      display inline-block
      margin-right 5px
      padding 10px
      &:hover
        cursor pointer
      &:last-child
        margin-right 0
    .active
      background #ccc
  .tabs-content
    height 200px
    position relative
    li
      background #ccc
      height calc(100% - 20px)
      left 0
      margin 10px
      opacity 0
      overflow hidden
      padding 10px
      position absolute
      top 0
    .active
      opacity 1