Latest web development tutorials

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

<Ul class = "Tabs" Daten -tab>
<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:

Beispiele

<Ul class = "Tabs vertikal" Daten-tab>

Versuchen »

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

<Ul class = "Tabs" Daten -tab>
<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

.tabs-Gehalt> .content.active {
-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 »