CraftLawrence,
открывашка по индексу ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tab-links li.active, .tab-content div.active, .tab-form div.active{
display: block;
background: rgb(51, 255, 102)
}
.tab-content div, .tab-form div {
display: none;
}
</style>
</head>
<body>
<ul class="tab-links">
<li class="active"><a href="#tab1">Tab #1</a></li>
<li><a href="#tab2">Tab #2</a></li>
<li><a href="#tab3">Tab #3</a></li>
<li><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">Контент 1</div>
<div id="tab2" class="tab">Контент 2</div>
<div id="tab3" class="tab">Контент 3</div>
<div id="tab4" class="tab">Контент 4</div>
</div>
<div class="tab-form">
<div id="form1" class="tab active">Форм 1</div>
<div id="form2" class="tab">Форм 2</div>
<div id="form3" class="tab">Форм 3</div>
<div id="form4" class="tab">Форм 4</div>
</div>
<script>
var elems = [document.querySelectorAll(".tab-links li"),
document.querySelectorAll(".tab-content div"),
document.querySelectorAll(".tab-form div")];
[].forEach.call(elems[0], function(el, indx) {
el.onclick = function() {
var active = document.querySelectorAll(".active");
for (var i = 0; i < active.length; i++) {
active[i].classList.remove("active");
elems[i][indx].classList.add("active")
}
return false
}
});
</script>
</body>
</html>