Zakładka Fundacja
Zakładka nawigacji może być bardzo dobry, aby pokazać różne treści, a zawartość można przełączać.
Tab Użyj <ul class="tabs" data-tab> -tab> , aby utworzyć każdą opcję <li> element i dodaj .tab-title klasę stworzyć.
Wskazówka: Można użyć aktualnie wybranego elementu .active klasę.
Przykłady
<Li class = "tab-title aktywny"> <a href = "#"> główna </ a> </ li>
<Li class = "tab-title "> <a href = "#"> Menu 1 </ a> </ li>
<Li class = "tab-title "> <a href = "#"> Menu 2 </ a> </ li>
<Li class = "tab-title "> <a href = "#"> Menu 3 </ a> </ li>
</ Ul>
Spróbuj »
Zakładka pionie
Zakładka pionie Użyj .vertical kategorie:
przełączanie Tab
Jeśli chcesz zmienić tej zakładce, można użyć elementu <div> plusa .content klasę. Plus unikatowy identyfikator, na każdej karcie, a następnie podłącz go do elementu listy (<a href = "# menu1" otwiera id = "content" MENU1 opcja). Wreszcie, wszystkie opcje na zawartość <div> na elemencie, The <div> Element dodać .tabs-content klasy i inicjuje Foundation JS.
Uwaga .active klasa jest automatycznie dodawane do aktualnie wybranej zakładki:
Przykłady
<Li class = "tab-title aktywny"> <a href = "#home"> główna </ a> </ li>
<Li class = "tab-title "> <a href = "# menu1"> Menu 1 </ a> </ li>
<Li class = "tab-title "> <a href = "# menu2"> Menu 2 </ a> </ li>
<Li class = "tab-title "> <a href = "# menu3"> Menu 3 </ a> </ li>
</ Ul>
<Div class = "tabs-content ">
<Div class = "content aktywny" id = "Home">
<H3> HOME </ h3>
<P> Dom jest tam gdzie serce jest .. </ p>
</ Div>
<Div class = "content" id = "menu1">
<H3> Menu 1 </ h3 >
<P> Trochę tekstu, blabla < / p>
</ Div>
<Div class = "content" id = "menu2">
<H3> Menu 2 </ h3 >
<P> Trochę inny tekst. < / P>
</ Div>
<Div class = "content" id = "menu3">
<H3> Menu 3 </ h3 >
<P> Ostatnia zakładka. </ P>
</ Div>
</ Div>
<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Spróbuj »
Tab Fade
Za pomocą CSS, aby dostosować zaczepy zanikać w efekcie:
Przykłady
-webkit-animacja: fadeEffect 1s;
animacja: 1s fadeEffect;
}
@ -webkit-Keyframes fadeEffect {
z {opacity: 0;}
do {opacity: 1;}
}
@keyframes fadeEffect {
z {opacity: 0;}
do {opacity: 1;}
}
Spróbuj »