Edit in JSFiddle

<div class="tabs">
  <div class="tab-header" no-js on-click-switch-class=".tab-header active" on-click-set-text=".tab-content some content">Tab 1</div>
  <div class="tab-header" no-js on-click-switch-class=".tab-header active" on-click-set-text=".tab-content some other content">Tab 2</div>
  <div class="tab-header" no-js on-click-switch-class=".tab-header active" on-click-set-text=".tab-content yet another content">Tab 3</div>
  <div class="tab-header" no-js on-click-switch-class=".tab-header active" on-click-set-text=".tab-content and the last content">Tab 4</div>

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

body {
  font-family: sans-serif;
  background: white;
  color: black;
}

.tab-header {
  display: inline-block;
  padding: 20px;
  border: 1px #e0e0e0 solid;
  border-radius: 5px;
  border-bottom: none;
  cursor: pointer;
}

.tab-header:hover, .tab-header.active {
  background: #eee;
}

.tab-content {
  border: 1px #e0e0e0 solid;
  padding: 20px;
  width: 90%;
  height: 100px;
}

// no javascript.