easyTab.js

function easyTab(tab, content){
  return this instanceof easyTab ? this.init(tab, content) : new easyTab(tab, content);
};

easyTab.prototype.init = function(tab, content) {
  this.el = {
    tab: tab,
    content: content
  };
  document.querySelector(this.el.tab).addEventListener('click', this, false);
};

easyTab.prototype.handleEvent = function(e) {
  e.preventDefault();
  var ele = e.target;
  var tag = e.target.tagName;
  if (tag == 'I'){
    ele = e.target.parentNode;
  }
  $(this.el.tab + ' span').removeClass('active');
  $(ele).addClass('active');

  var tab = ele.parentNode.getAttribute('data-tab');
  $(this.el.content + '>li').removeClass('active');
  $(this.el.content + '>li').eq(tab).addClass('active');
}

easyTab('.order-nav', '.order-detail-content-wrap');