Creando un tab en HTML-CSS-JavaScript.

HTML

Crearemos una serie de bloques div. El primero será el que contenta los botones del tab. El resto de div's serán los tab propiamente dichos

Cada uno de los tabs deberá tener su propio id para poder distinguirlos luego en el código JavaScript.

A cada uno la asignamos una class para asignar un estilo CSS.

En cada botón del TAB se llamará al evento onclick que será el encargado de "activar/desactivar" el TAB (realmente, hacerlo visible o ocultarlo.

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'tabname1')" id="defaultOpen">TAB1</button>
  <button class="tablinks" onclick="openTab(event, 'tabname2')">Paris<TAB2>
  <button class="tablinks" onclick="openTab(event, 'tabname3')">Tokyo<TAB3>
</div>
<div id="tabname1" class="tabcontent">
  <h3>Tab title 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, ad, 
  repellendus autem inventore minima quod officiis velit rerum illum ut 
  fuga rem a repudiandae libero dolore similique et! Quae, labore!</p>
</div>
<div id="tabname2" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>
<div id="tabname3" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

CSS

El siguiente paso es dar estilo a cada uno de los elementos del tab.

El "truco" consiste en que cada TAB estará oculto, teniendo su propiedad display a none y luego mediante JavaScript se cambiará su visibilidad.

Al final del código se ha añadido una animación, para que la transición entre tabs sea mas vistosa, aunque no es importante para el funcionamiento.

/* Damos estilo al contenedor de los botones del tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Damos estilo a los botones del tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Cuando pasamos el ratón por encima... */
.tab button:hover {
  background-color: #ddd;
}

/* Si el botón está activo cambiamos el color. */
.tab button.active {
  background-color: #ccc;
}

/* Damos estilo al contenedor de cada tab */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Creamos una animación fadeEffect para que quede mas chulo, podemos quitarlo
   para que sea más simple */
.tabcontent {
  animation: fadeEffect 1s; 
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

JavaScript

La función que mostrará los tabs será la siguiente:

function openTab(evt, cityName) {
  var i, tabcontent, tablinks;

  // Buscamos en el documento todos los objetos con la clase "tabcontent", que
  // serán los tab y los hacemos invisibles modificando su estilo "display".
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Buscamos en el documento todos los objetos con la cales "tablinks", que
  // serán los botones del TAB, reemplazamos su clase "active" por nada para 
  // hacer que sea un botón no activo.
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Ahora con el id hacemos que el id corespondiente del tab se vea usando "block".
  document.getElementById(cityName).style.display = "block";
  // Ver texto..
  evt.currentTarget.className += " active";
}

Lo primero que hará será recorrer todos los elementos del tipo tabcontent y los ocultara haciendo su display al valor none.

Lo siguiente es buscar todos los objetos "tablinks" (los botones), y hacerlos inactivos, reemplazando la clase "active" por nada.

Ahora tenemos que hacer el tab y el botón activos. Para ello usamos el id del tab y hacemos que su propiedad display sea block en vez de none.

La línea:

evt.currentTarget.className += " active";

Es la encargada de hacer que el botón sea activo o no, añadiendo a la clase el estilo "active".

currentTarget retorna el elemento que provocó el evento, en este caso el botón al hacer clic en él.

Resultado

Referencias

w3schools - How to create a tab