Creación de interfaz con pestañas simple con CSS puro

Vista prévia

Descripción

Un enfoque CSS puro para construir un componente de pestañas que hace uso de CSS : target pseudo-clase para alternar el visible de los paneles con pestañas. Sin necesidad de utilizar elementos de radio o CheckBox.

Funcionamiento

Compile la estructura HTML para el componente de pestañas con 3 paneles con pestañas.

<article class="tabs">

<section id="tab2">


<h2><a href="#tab2">Tab 2</a></h2>


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

</section>

<section id="tab3">


<h2><a href="#tab3">Tab 3</a></h2>


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

</section>

<section id="tab3">


<h2><a href="#tab1">Tab 1</a></h2>


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

</section>
</article>

El CSS básico para el estilo del componente de pestañas.

article.tabs {

position: relative;

display: block;

width: 40em;

height: 15em;

margin: 2em auto;
}

article.tabs section {

position: absolute;

display: block;

top: 1.8em;

left: 0;

right: 0;

height: 12em;

padding: 10px 20px;

background-color: #ddd;

border-radius: 5px;

box-shadow: 0 3px 3px rgba(0,0,0,0.1);

z-index: 0;

color: black;
}

article.tabs section .tab-content { display: none; }

article.tabs section:last-child {

z-index: 1;

color: #333;

background-color: #fff;
}

article.tabs section:last-child .tab-content { display: block; }

article.tabs section h2 {

position: absolute;

font-size: 1em;

font-weight: normal;

width: 120px;

height: 1.8em;

top: -1.8em;

left: 10px;

padding: 0;

margin: 0;

color: #999;

background-color: #ddd;

border-radius: 5px 5px 0 0;
}

article.tabs section:last-child h2 {

color: #333;

background-color: #fff;
}

article.tabs section:nth-child(1) h2 { left: 132px; }

article.tabs section:nth-child(2) h2 { left: 254px; }

article.tabs section h2 a {

display: block;

width: 100%;

line-height: 1.8em;

text-align: center;

text-decoration: none;

color: inherit;

outline: 0 none;
}

article.tabs section:target, article.tabs section:target h2 {

color: #333;

background-color: #fff;

z-index: 2;
}

El truco CSS para ocultar/mostrar paneles con pestañas usando : target pseudo-clase.

article.tabs section:target .tab-content { display: block; }

article.tabs section:target ~ section:last-child h2 {

color: #999;

background-color: #ddd;
}

article.tabs section:target ~ section:last-child .tab-content { display: none; }