Untitled

<div class="tab">

  <ul class="tab-menuWrapper clearfix">

    <li class="tab-menu current-menu">menu1-1</li>

    <li class="tab-menu">menu2-2</li>

    <li class="tab-menu">menu3-3</li>

    <li class="tab-menu">menu4-4</li>

  </ul>

  <div class="tab-contentWrapper">

    <div class="tab-content">content1-1</div>

    <div class="tab-content hidden">content2-2</div>

    <div class="tab-content hidden">content3-3</div>

    <div class="tab-content hidden">content4-4</div>

  </div>

</div>

 <div class="tab">

  <ul class="tab-menuWrapper clearfix">

    <li class="tab-menu current-menu2">menu1-1</li>

    <li class="tab-menu">menu2-2</li>

    <li class="tab-menu">menu3-3</li>

    <li class="tab-menu">menu4-4</li>

  </ul>

  <div class="tab-contentWrapper">

    <div class="tab-content">content1-1</div>

    <div class="tab-content hidden">content2-2</div>

    <div class="tab-content hidden">content3-3</div>

    <div class="tab-content hidden">content4-4</div>

  </div>

</div>

ul {margin: 0; padding: 0; list-style: none; }

li {margin: 0; padding: 0; }

.tab {

  width: 990px;

  margin: 10px auto 50px;

}

.clearfix {

  zoom: 1;

}

.clearfix:after {

  content: ".";

  display: block;

  clear: both;

  line-height: 0;

  visibility: hidden;

  height: 0;

}

.hidden { display: none; }

.tab-menu {

  float: left;

  margin: 0 5px;

  padding: 5px;

  background: rgba(0, 0, 0, .3);

  border: 1px solid #333;

  border-bottom: none;

  cursor: pointer;

}

.tab-contentWrapper {

  border: 1px solid #000;

  height: 300px;

}

.current-menu {

  color: #fff;

}

.current-menu2 {

color: #ff0;

}

// base.js

var GLOBAL = {};

GLOBAL.namespace = function(str) {

  var arr = str.split("."), o = GLOBAL;

  for (var i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++) {

    o[arr[i]] = o[arr[i]] || {};

    o = o[arr[i]];

  }

}; 

GLOBAL.namespace("Dom");

GLOBAL.Dom.getElementsByClassName = function(str, root, tag) {

  if (root) {

    root = (typeof root == "string") ? document.getElementById(root) : root;

  } else {

    root = document.body;

  }

  tag = tag || "*";

  var els = root.getElementsByTagName(tag), arr = [];

  for (var i = 0, n = els.length; i < n; i++) {

    for (var j = 0, k = els[i].className.split(" "), l = k.length; j < l; j++) {

      if (k[j] == str) {

        arr.push(els[i]);

        break;

      }

    }

  }

  return arr;

};

GLOBAL.Dom.addClass = function(node,str){

 if(!new RegExp("(^|\\s+)"+str).test(node.className)){

  node.className = node.className + " " + str;

 }

};

GLOBAL.Dom.removeClass = function(node, str) {

  node.className = node.className.replace(new RegExp("(^|\\s+)"+str), "");

};

// define function

function setTab(root, currentClass) {

var menus = GLOBAL.Dom.getElementsByClassName("tab-menu", root),

    tabContents = GLOBAL.Dom.getElementsByClassName("tab-content", root);

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

  menus[i]._index = i;

  menus[i].onclick = function() {

    for (var j = 0; j < tabContents.length; j++) {

      tabContents[j].style.display = "none";

    }

    tabContents[this._index].style.display = "block";

    if (currentClass) {

      var currentMenu = GLOBAL.Dom.getElementsByClassName(currentClass, root)[0];

      if (currentMenu) {

        GLOBAL.Dom.removeClass(currentMenu, currentClass);

       }

      GLOBAL.Dom.addClass(this, currentClass);

    }

  };

}

}

// application.js

var tabs = GLOBAL.Dom.getElementsByClassName("tab");

setTab(tabs[0], "current-menu");

setTab(tabs[1], "current-menu2");