Stiftung Registerkarte
Tab-Navigation kann sehr gut sein, unterschiedliche Inhalte zu zeigen, und der Inhalt umgeschaltet werden kann.
Tab Verwenden Sie die <ul class="tabs" data-tab>
-tab> auf jede Option erstellen <li> -Element und fügen Sie .tab-title
- Klasse zu erstellen.
Tipp: Sie können das aktuell ausgewählte Element verwenden .active
Klasse.
Beispiele
<Li class = "Tab-Titel aktiv"> <a href = "#"> Home </ a> </ li>
<Li class = "Tab-title "> <a href = "#"> Menü 1 </ a> </ li>
<Li class = "Tab-title "> <a href = "#"> Menü 2 </ a> </ li>
<Li class = "Tab-title "> <a href = "#"> Menü 3 </ a> </ li>
</ Ul>
Versuchen »
Vertikale Reiter
Vertikale Register können .vertical
Kategorien:
Tab Schalt
Wenn Sie die Einstellungen auf der Registerkarte ändern möchten, können Sie das <div> Element Plus verwenden .content
Klasse. Plus eine eindeutige ID auf jeder Registerkarte, und verbinden Sie es mit dem Listenelement (<a href = "# menu1" öffnet id = "menu1" Option Inhalt). Schließlich werden alle Optionen auf dem Inhalt <div>
auf das Element, das <div>
Element hinzufügen .tabs-content
- Klasse und initialisiert Foundation JS.
Hinweis .active
Klasse wird auf die aktuell ausgewählte Registerkarte automatisch hinzugefügt:
Beispiele
<Li class = "Tab-Titel aktiv"> <a href = "#home"> Home </ a> </ li>
<Li class = "Tab-title "> <a href = "# menu1"> Menü 1 </ a> </ li>
<Li class = "Tab-title "> <a href = "# menu2"> Menü 2 </ a> </ li>
<Li class = "Tab-title "> <a href = "# menu3"> Menü 3 </ a> </ li>
</ Ul>
<Div class = "Tabs-content ">
<Div class = "content aktiv" id = "home">
<H3> HOME </ h3>
<P> Zuhause ist , wo das Herz ist .. </ p>
</ Div>
<Div class = "content" id = "menu1">
<H3> Menü 1 </ h3 >
<P> Ein Text, blabla < / p>
</ Div>
<Div class = "content" id = "menu2">
<H3> Menü 2 </ h3 >
<P> einen anderen Text. < / P>
</ Div>
<Div class = "content" id = "menu3">
<H3> Menü 3 </ h3 >
<P> Letzte Tab. </ P>
</ Div>
</ Div>
<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>
Versuchen »
Tab Fade
Verwenden Sie CSS Tabs Effekt verblassen anpassen:
Beispiele
-webkit-Animation: fadeEffect 1s;
Animation: fadeEffect 1s;
}
@ -webkit-Keyframes fadeEffect {
von {Opazität: 0;}
zu {Opazität: 1;}
}
@keyframes fadeEffect {
von {Opazität: 0;}
zu {Opazität: 1;}
}
Versuchen »