Tabs sólo con CSS

El artículo de kamikazemusic.com nos muestra una forma de crear pestañas o tabs sin JavaScript, utilizando sólo propiedades CSS que, con las limitaciones del caso, funcionarán incluso en Internet Explorer.

El código HTML es simplísimo y lo pondremos donde se nos ocurra:

<div id="csstabs">
  <!-- la primera pestaña -->
  <div id="tab1" class="tabbox">
    <h3>TITULO 1</h3>
    <div class="tabcontent">
      ....... aquí pondremos el contenido .......
    </div>
  </div>
  <!-- la segunda pestaña -->
  <div id="tab2" class="tabbox">
    <h3>TITULO 2</h3>
    <div class="tabcontent">
      ....... aquí pondremos el contenido .......
    </div>
  </div>
</div>

El esquema lo repetimos con cualquier cantidad de pestañas y en este ejemplo, sólo hay dos.

Ahora, el CSS que tiene una parte que es genérica y otra que es individual, para cada una de las pestañas. Lo ponemos antes de </head>:

<style>

/* debemos dimensionar el área donde se mostrarán */
#csstabs {
  height: 370px;
  margin:0 auto;
  position:relative;
  width: 350px;
}
#csstabs div {
  padding: 10px;
  -moz-border-radius: 20px;
}
#csstabs h3 { /* los títulos de las pestañas */
  color: #ABC;
  cursor: pointer;
  display: block;
  font-size: 20px;
  font-weight: normal;
  height: 25px;
  line-height: 25px;
  margin: 0;
  padding: 5px;
  text-align: center;
  width: 160px;
  -moz-border-radius: 20px;
}
.tabcontent {  /* el contenido de las pestañas */
  display: block;
  height: 320px;
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 40px;
  width: 100%;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
  z-index: 0;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
  opacity: 0;
  z-index: 0;
}

 /* las definiciones de cada pestaña que pueden ser iguales o diferentes */

#tab1 .tabcontent {
  background-color: #234;
  z-index: 2;
}
#tab1 h3 {
  left: 0;
  position: absolute;
  top: 0;
  z-index: 3;
}
#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
  background-color: #234;
  color: #DEF;
  z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
  opacity: 1;
  z-index: 3;
}

#tab2 .tabcontent {
  background-color: #E6EAF3;
  opacity: 0;
  z-index: 1;
}
#tab2 h3 {
  left: 180px;
  position: absolute;
  top: 0;
}
#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
  background-color: #E6EAF3;
  color: #565A63;
  z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
  opacity: 1;
  z-index: 3;
}

</style>

Pestaña 1

Nullam vitae lacinia risus. In hac habitasse platea dictumst. Curabitur dapibus magna sed lorem mollis sagittis.

Suspendisse imperdiet; erat id iaculis aliquet, erat tellus commodo libero, sed commodo arcu felis at enim. Integer nec neque arcu, ut bibendum tortor. In dolor lorem, molestie vitae viverra sit amet, elementum vel orci! Etiam tincidunt erat vel sem venenatis lobortis.

Mauris elit urna, molestie a bibendum non, iaculis non magna.

Quisque lectus tortor, lobortis vel porta a, tempus eget lorem? Aenean diam tellus, tristique quis consequat et, ornare id dui.

Pestaña 2