Il miglior tutorial scheda Foundation Nel 2024, in questo tutorial puoi imparare
scheda verticale,commutazione Tab,Tab Fade,
scheda Foundation
navigazione Tab può essere molto buona per mostrare contenuti diversi, e il contenuto può essere commutata.
Utilizzare la scheda <ul class="tabs" data-tab> -Tab> per creare ogni opzione <li> elemento e aggiungere .tab-title di classe per creare.
Suggerimento: È possibile utilizzare l'elemento selezionato .active classe.
Esempi
<Ul class = dati "schede" -Tab>
<Li class = "scheda-title attivo"> <a href = "#"> casa </ a> </ li>
<Li class = "scheda-title "> <a href = "#"> Menu 1 </ a> </ li>
<Li class = "scheda-title "> <a href = "#"> Menu 2 </ a> </ li>
<Li class = "scheda-title "> <a href = "#"> Menu 3 </ a> </ li>
</ Ul> Prova »
scheda verticale
scheda verticali Utilizzare .vertical categorie:
Esempi
<Ul class = "schede verticale" dati-scheda>
Prova »
commutazione Tab
Se si desidera modificare l'impostazione scheda, è possibile utilizzare l'elemento <div> più .content classe. Più un ID univoco per ogni scheda, e collegarlo alla voce di elenco (<a href = "# menu1" apre id = contenuto opzione "MENU1"). Infine, tutte le opzioni sul contenuto <div> sull'elemento, il <div> elemento per aggiungere .tabs-content di classe, e inizializza Fondazione JS.
Nota .active classe viene automaticamente aggiunto alla scheda attualmente selezionato:
Esempi
<Ul class = dati "schede" -Tab>
<Li class = "scheda-title attivo"> <a href = "#home"> casa </ a> </ li>
<Li class = "scheda-title "> <a href = "# menu1"> Menu 1 </ a> </ li>
<Li class = "scheda-title "> <a href = "# menu2"> Menu 2 </ a> </ li>
<Li class = "scheda-title "> <a href = "# menu3"> Menu 3 </ a> </ li>
</ Ul> <Div class = "schede-content ">
<Div class = "contenuto attivo" id = "casa">
<H3> HOME </ h3> <P> La casa è dove il cuore è it </ p>
</ Div> <Div class = id "content" = "MENU1">
<H3> Menu 1 </ h3 >
<P> Del testo, blabla < / p>
</ Div> <Div class = id "content" = "menu2">
<H3> Menu 2 </ h3 >
<P> Qualche altro testo. < / P>
</ Div> <Div class = id "content" = "menu3">
<H3> Menu 3 </ h3 >
<P> ultima scheda. </ P>
</ Div> </ Div> <! - Inizializzazione Fondazione JS -> <Script> $ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script> Prova »
Tab Fade
Utilizzare i CSS per personalizzare le schede fade in:
Esempi
.tabs-content> .content.active {
-webkit-animation: fadeEffect 1s;
Animazione: 1s fadeEffect;
}
@ -webkit-Fotogrammi chiave fadeEffect {
da {opacità: 0;}
a {opacità: 1;}
}
@keyframes fadeEffect {
da {opacità: 0;}
a {opacità: 1;}
}
Prova »