Effetto Tabs con CSS e jQuery

18 Set

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 18 settembre 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

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 Commenti su “Effetto Tabs con CSS e jQuery”

  1. francesco 3 dicembre 2012 at 19:27 #

    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!

    • grimax 3 dicembre 2012 at 21:42 #

      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

  2. francesco 4 dicembre 2012 at 12:34 #

    Ciao Grimax,
    ok, grazie dunque a maggior ragione per la celere risposta e la segnalazione del link! 🙂
    Un saluto e buon lavoro!
    Francesco

  3. Max 19 aprile 2013 at 11:39 #

    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?

    • grimax 19 aprile 2013 at 12:58 #

      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?

  4. giacomo 21 luglio 2013 at 10:13 #

    Ciao, non sò quanto sia vecchia l’articolo, ma grazie a jquery UI è ora possibile fare tutto tramite una funzione specifica, e ridurre tantissimo il codice.
    http://jqueryui.com/tabs/

  5. giacomo 21 luglio 2013 at 11:01 #

    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.

  6. grimax 21 luglio 2013 at 17:29 #

    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