Tabs di navigazione con jQuery

Vediamo come è possibile, con poche righe di codice, creare un semplice sistema di navigazione a tab usando jQuery. Il concetto alla base di questo sistema è molto semplice. Tutte le nostre tab infatti saranno nella stessa pagina (gran bella cosa in ottica SEO!) ma tramite jQuery andremo a nasconderle e mostrare solo quelle che vogliamo visualizzare al click sulla voce corrispondente.

Ora, se ti sei affrettato/a a guardare la demo ti sarà venuto da chiederti che diavoleria era quell’introduzione che scompare!?! Non preoccuparti, ero solo in preda a smania di sperimentare qualcosa…! I più esperti diranno che si tratta di “banalità” forse, ed in fondo è così, ma il bello del web è che siamo liberi di sbizzarrirci, provare e scoprire cose nuove sempre e tendenzialmente senza far danni no?
Detto ciò, veniamo al succo della questione dell’articolo. Prendiamo in analisi il codice che fa “muovere” lo script che hai visto nella demo (prenderò in considerazione solo le parti inerenti la navigazione a tabs).

Il codice HTML da utilizzare

Vediamo innanzitutto l’html che ci interessa:

<ul class="tabs">
        <li><a href="#tab1">Tab Numero 1</a></li>
        <li><a href="#tab2">Tab Numero 2</a></li>
        <li><a href="#tab3">Tab Numero 3</a></li>
    </ul>
    <div class="contenitore_tabs">
        <div id="tab1" class="blocco-tab">
        contenuto terza tab
        </div>
        <div id="tab2" class="blocco-tab">
        contenuto seconda tab
      	</div>
        <div id="tab3" class="blocco-tab">
        contenuto terza tab
        </div>
    </div>

Come potrai subito notare, c’è una stretta corrispondenza tra le voci di menù che hanno come href tab1, tab2, tab3 e gli id delle tab vere e proprie. Abbiamo poi definito una classe comune per le tre tab. Ci tornerà utile in fase di analisi del codice jQuery.
Per quanto riguarda questo caso, il css non richiede particolari note di merito, sta infatti alla vostra creatività decidere come realizzare le tab. Tuttavia mi pare doveroso ricordare (anche per i più inesperti) che nel caso voleste mantenere una compatibilità con IE6, dovrete porre attenzione nel focalizzare le stilizzazioni sui link piuttosto che sui li. Per il momento vi lascio leggere il css indispensabile (esperimenti a parte) usato nell’esempio…

Il codice CSS

* {
	margin:0;
	padding:0;
	border:0;
	}
body {
	font-size:13px;
	line-height:1.6em;
	color:#333;
	font-family:Verdana, Geneva, sans-serif;
	background:#F9F9F9;
	}
a {
	text-decoration:none;
	outline:none;
	color:#333;
	}
p {
	margin-bottom:10px;
	}
#container {
	position:absolute;
	width:660px;
	height:400px;
	background-color: #7ca0c5;
	border:1px solid #999;
	left:50%;
	top:50%;
	margin-left:-330px;
	margin-top:-200px;
	z-index:1;
	}
ul.tabs {
	display:block;
	list-style:none;
	margin:0 auto;
	position:relative;
	z-index:2;
	}
ul.tabs li {
	float:left;
	margin:15px 10px;
	}
ul.tabs li.active a {
	border:1px solid #999;
	background:#fff;
	}
ul.tabs li a {
	display:block;
	padding:5px 15px;
	border:1px solid #E6E6E6;
	position:relative;
	color:#333;
	font-weight:bold;
	}
ul.tabs li a, .contenitore_tabs {
	background-color: #e7f3fe;
	}
ul.tabs li a:hover {
	background-color: #c5d9ed;
	border:1px solid #999;
	}
.contenitore_tabs {
	clear:both;
	margin:10px;
	min-height:300px; height:auto !important; height:300px;
	padding:10px;
	overflow:auto;
	border:1px solid #999;
	}

Con questo estratto dovreste riuscire già a creare qualcosa di funzionale. Ripeto, il resto è lasciato alle esigenze del caso. Nel caso vi fossero passaggi oscuri nel codice vi invito a chiedere nei commenti spiegazioni, sarò lieto di darvele!

jQuery: che lo spettacolo abbia inizio!

Passiamo però al cuore della vicenda analizzando nel dettaglio lo script jQuery creato ad hoc per la situazione.

$(document).ready(function() {
//Quando la pagina viene caricata
	$(".blocco-tab").hide(); //nascondi tutti i contenuti delle tabs
	$("ul.tabs li:first").addClass("active").show(); //Attiva la prima tab
	$(".blocco-tab:first").show(); //Mostra il contenuto della prima tab
	//Al click sulla linguetta della tab
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Rimuovi ogni classe "active"
		$(this).addClass("active"); //E aggiungila solo a quella su cui ho cliccato
		$(".blocco-tab").hide(); //Nascondi tutti i contenuti delle tab
		var activeTab = $(this).find("a").attr("href"); //Trova l'href per identificare in modo univoco la tab ed il contenuto
		$(activeTab).fadeIn(); //Mostrami quest'ultimo con effetto di fadeIn
		return false;
		});
});

Ho volutamente commentato direttamente il codice così da renderlo più chiaro. Ad ogni modo vediamo brevemente i passaggi nel dettaglio:

$(document).ready(function() {
$(".blocco-tab").hide();
	$("ul.tabs li:first").addClass("active").show();
	$(".blocco-tab:first").show();

Al caricamento della pagina nascondiamo tutti i div con i contenuti delle tab, aggiungiamo una classe active (che stilizzeremo opportunamente via css) al primo elemento della nostra lista e mostriamo il contenuto della prima tab. In questo modo avremo, al caricamento della pagina, la prima voce di menù attiva con la corrispondente tab aperta.

$("ul.tabs li").click(function() {
	$("ul.tabs li").removeClass("active");
	$(this).addClass("active"); 
	$(".blocco-tab").hide();

Quando clicchiamo un un elemento della nostra lista (il menù), rimuovi tutte le classi active presenti dalle “li” e aggiungine una a quella (this) su cui ho cliccato. Poi nascondi tutti i div con i contenuti e…

	var activeTab = $(this).find("a").attr("href"); 
	$(activeTab).fadeIn(); 
	return false;
	});
});

Creiamo una variabile activeTab che sarà uguale all’attributo href del link che sta “dentro” (la funzione .find() trova gli elementi discendenti) alla lista su cui abbiamo cliccato. Ad esempio, nel caso cliccassimo sulla seconda voce di menù, verrebbe memorizzato “#tab2”. A questo punto mostrami, con effetto fadeIn (a comparsa) il div contenitore che si chiama “#tab2”. Et voilà il gioco è fatto!