Creare un menu tab con jQuery

Nel post Tab Menu CSS3 abbiamo visto come creare un menu di navigazione partendo da una lista HTML. In questa "pillola" vedremo come utilizzare questo menu per visualizzare più contenuti all'interno della stessa pagina.

DEMO

Nel codice HTML del menu inseriamo un'ancora in ogni elemento <li> della lista, così da collegare la voce di ogni tab (scheda) al relativo contenuto. La classe hover_tab permette di evidenziare il tab attivo, variandone i colori dello sfondo e del testo.

<div id="menu">
<ul>
    <li><a class="hover_tab" href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
    <li><a href="#tab5">Tab 5</a></li>
</ul>
</div>

Inseriamo quindi i contenuti associati alle voci dei tab, racchiusi in div, in un contenitore con id txt_cont:

<div id="txt_cont">
   <div class="txt_tab" id="tab1">Testo tab 1</div>
   <div class="txt_tab" id="tab2">Testo tab 2</div>
   <div class="txt_tab" id="tab3">Testo tab 3</div>
   <div class="txt_tab" id="tab4">Testo tab 4</div>
   <div class="txt_tab" id="tab5">Testo tab 5</div>
</div>
 

Lo script che gestisce la visualizzazione dei tab utilizza le librerie jQuery (v. 1.10.2) e jQuery UI (v. 1.10.4) che devono essere entrambe richiamate in head della pagina.

Questo il codice utilizzato:

$(document).ready(function(){
  $('div#txt_cont div:gt(0)').css('display', 'none');
  $('#menu ul li a').click(function(event){
    event.preventDefault();
    var id_tab = $(this).attr('href');
    $('#menu ul li a').removeClass('hover_tab');
    $(this).addClass('hover_tab');
    $('div.txt_tab:visible').hide();
    $(id_tab).show('slide');
  });
});

Al caricamento del documento tutti i div con classe txt_tab vengono nascosti ad eccezione del primo, che resta visibile. Nascondere i div tramite javascript invece che con un CSS rende fruibili i contenuti anche a chi naviga con javascript disabilitato.

Al click sul tab viene nascosta, con il metodo hide() di jQuery, la scheda visualizzata in quel momento nella pagina e viene impostata la classe hover_tab al tab cliccato.

Il valore dell'ancora viene memorizzato nella variabile id_tab: esso viene utilizzato come selettore per rendere visibile il div.txt_tab associato al tab cliccato. Per evitare che venga eseguita l'ancora, cosa che comporterebbe lo scroll verticale della pagina, viene richiamato il metodo event.preventDefault().

Lo scorrimento orizzontale dei contenuti è ottenuto grazie all'effetto slide di jQuery UI impostato come parametro al metodo show()di jQuery.