Effetto Tabs con CSS e jQuery

In rete si possono trovare numerosi tutorials sulla creazione di Tabs, molti dei quali sfruttano la potenza di jQuery, tuttavia ne voglio proporre uno veramente semplice e che soprattutto non richiede nessun plugin aggiuntivo.
Veniamo subito al dunque e diamo un’occhiata alla parte HTML della tecnica:

HTML

In pratica mi servirò di una lista non ordinata per le schede (Tabs), ed una serie di div (ognuno con proprio ID) per i vari contenuti. L’importante è che ogni elemento della lista abbia un attributo href che punti all’ID del relativo contenuto (div):

    
Scheda 1
    
Scheda 2
    
Scheda 3


    

    	
    
    

       	
    
    

       	
    

Fino a qua tutto chiaro ed anche relativamente banale, lista per le schede, un div contenitore “contenitore_tab” che conterrà tutti i contenuti ed una serie di div “contenuto_tab”, uno per ogni Tabs. Vediamo ora la parte dei CSS.

CSS

La difficoltà principale è quella di mostrare il Tab attivo attaccato al contenuto, senza nessun bordo di divisione. Questo lo possiamo ottenere attraverso un uso studiato ad Hoc del bordi e degli sfondi dei CSS:

/* Lista */
ul.tabs {
	margin: 0; 	padding: 0;
	width: 100%;
	float: left;
	list-style: none;
	height: 30px;
	border-bottom: 1px solid #999; 	border-left: 1px solid #999;
}
ul.tabs li {
	margin: 0; 	padding: 0;
	float: left;
	height: 29px;
	line-height: 29px; /* per allineare verticalmente il testo dentro ai Tabs */
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #D2E1F6;
}
ul.tabs li a {
	padding: 0 20px;
	display: block;
	color: #555555;
	font-size: 1.2em;
	text-decoration: none;
	border: 1px solid #fff; /* per dare l'effetto smusso all'interni dei Tabs */
	outline: none;
}
ul.tabs li a:hover {
	background: #D2E1F6;
}
ul.tabs li.active, ul.tabs li.active a:hover  { /* background e bordo inferiore devono avere lo stesso colore del box con il contenuto */
	background: #fff;
	border-bottom: 1px solid #fff;
}

/* Contenuto */
.contenitore_tab {
	background: #fff;
	border: 1px solid #999;	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
}
.contenuto_tab {
	padding: 20px;
	font-size: 1.2em;
}

jQuery

Infine la parte di script con jQuery, anche questa fin troppo semplice, in cui i commenti sul codice spiegano esaurientemente l’effetto ottenuto dalle varie istruzioni:

$(document).ready(function() {
	$(".contenuto_tab").hide(); //Nascondo tutti i contenuti
	$("ul.tabs li:first").addClass("active").show(); //Attivo il primo tab
	$(".contenuto_tab:first").show(); //Mostro il primo contenuto (contenuto del primo tab)

	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Rimuovo tuttle le classi "active"
		$(this).addClass("active"); //Attivo il tab selezionato
		$(".contenuto_tab").hide(); //Nascondo tutti i contenuti

		var tabAttivo = $(this).find("a").attr("href"); //Prendo il valore dell'attributo href del tab per attivare il realtivo contenuto
		$(tabAttivo).fadeIn(); //Faccio un Fade in per mostrare il contenuto dell'ID appena trovato
		return false;
	});
});

Live Demo