Categorie
CSS JQuery

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):

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:

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:

Live Demo

live demo

8 risposte su “Effetto Tabs con CSS e jQuery”

Ciao,
complimenti innanzitutto per questo bel tutorial e l’effetto che se ne ricava 🙂
Grazie!

Ora vengo alla domanda: in una “tab” avrei bisogno di inserirci una mappa Google (tramite l’iframe prelevato da GoogleMap), ma per qualche strano motivo l’inserimento dentro la scheda provoca sulla mappa due “bug”:
– sposta la visualizzazione della mappa in modo random;
– sul segnaposto non si apre in automatico il fumetto (solo se ci vado a cliccare);

Avevi mai riscontrato questi errori? Da cosa pensi possano dipendere e come si potrebbero risolvere?
Grazie,
ciao!

Ciao Francesco,
mi dispiace ma in questo periodo sono ingolfato con alcuni progetti e non tempo x approfondire,
comunque il problema mi sembra che si generi solo su alcuni browsers, chrome e firefox per esempio, mentre è ok su IE ed Opera, e solo sui tabs (div) nascosti in partenza.
E’ come se l’evento resize dell’oggetto map di google non fosse attivato oppure fosse sparato troppo presto, prima di conoscere le dimensioni dell’iframe.
Purtroppo usando questo approccio non puoi accedere all’oggetto mappa e attivare l’evento quindi potresti provare ad usare le API di Google Maps piuttosto che l’iframe.
Questa discussione su stackoverflow potrebbe darti qualche spunto:
http://stackoverflow.com/questions/9311874/google-map-position-incorrect-on-load

Sto provando lo script. Ho un problema
Ogni volta che clicco su un tab mi riposiziona la pagina in alto, cioè all’inizio.
Non c’è un modo per far rimanere la pagina fissa nella posizione in cui si trova mentre cambio tab?

Mi sembra strano quello che mi dici…
non e che per caso ti sembra che si riposizioni xchè il contenuto dei tabs e quindi la loro altezza è variabile e quindi ti si ridimensiona l’intera pagina?
Che browser usi?

Mi sbagliavo, a quanto pare con la funzione .tabs() di jquery UI si pone il problema del contenitore madre.
Con il tuo script invece non ci sono problemi di posizionamento del codice.
🙂 grazie mille, con poche modifiche sono riuscito a sfruttarlo per creare una cosa un pò ostica.

Giacomo, in effetti l’articolo è un po’ datato,
tuttavia quando non si vuole “scomodare” ulteriori librerie o frameworks oltre a jQuery può risultare sempre utile.

PS: da diverso tempo non uso più jQuery UI. Ti segnalo invece qualora non li conoscessi due framework che ti facilitano enormemente il lavoro lato client. Hanno tutto quello che serve compreso (e soprattutto) il supporto il responsive design:
http://twitter.github.io/bootstrap/index.html
http://foundation.zurb.com/

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.