Custom JS Tabs - No Jquery or Jquery UI

HTML

<div class='tab-bar'>
  <a href="#!" class="tab-button" onclick="open_tab('tab1');">Tab 1</a>
  <a href="#!" class="tab-button" onclick="open_tab('tab2');">Tab 2</a>
  <a href="#!" class="tab-button" onclick="open_tab('tab3');">Tab 3</a>
</div>

<div class='tabs tabs-1' id='tab1'>Tab 1</div>
<div class='tabs tabs-2' id='tab2'>Tab 2</div>
<div class='tabs tabs-3' id='tab3'>Tab 3</div>

CSS

.tabs-2, .tabs-3 {
  display:none;
}
a.tab-button:active,
a.tab-button:focus,
a.tab-button:target
{
  background:#999;
}
a.tab-button {
  display:inline-block;
  padding:10px 20px;
  background:#EEE;
  color:#444;
  text-decoration:none;
}
.tabs {
  padding:20px;
  max-width:500px;
  width:100%;
  border:1px solid #EEE;
}

Javascript

function open_tab(tab_name) {
  var i;
  var x = document.getElementsByClassName("tabs");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(tab_name).style.display = "block";
}
Tab 1
Tab 2
Tab 3

Page Views

This page has been viewed 122 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
Old programmers never die; they just lose some of their functions.