<div>

  <!-- Nav tabs -->
  <ul class="nav-tabs">
    <li><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home">My home</div>
    <div class="tab-pane" id="profile">My profile</div>
    <div class="tab-pane" id="messages">My messages</div>
    <div class="tab-pane" id="settings">My settings</div>
  </div>

</div>

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  list-style: none;
}
.nav-tabs > li {
  margin-bottom: 1px;
  margin-right: 1rem;
  line-height: 2rem;
}
.nav-tabs > li > a {
  cursor: pointer;
  text-decoration: none;
}
.tab-pane {
  padding: 1rem;
  display: none;
}
.tab-content > .active {
  display: block;
}

'use strict';

function setupNavtabs(navtab) {
  var tabs = navtab.querySelectorAll("*[data-target]");
  for (var i=0; i < tabs.length; i++) {
    var tab = tabs[i];

    tab.addEventListener("click", function(e) {
      var id = e.target.dataset.target;
      var pane = document.getElementById(id);
      pane.classList.add("active");

      // remove .active class of all sibling elements
      var el = pane.nextElementSibling;
      while (el) {
        el.classList.remove("active");
        el = el.nextElementSibling;
      }
      el = pane.previousElementSibling;
      while (el) {
        el.classList.remove("active");
        el = el.previousElementSibling;
      }
    });
  }
}

var navtabs = document.querySelectorAll(".nav-tabs");
for (var i=0; i < navtabs.length; i++) {
  setupNavtabs(navtabs[i]);
}