tab Yayasan
navigasi tab bisa sangat baik untuk menampilkan konten yang berbeda, dan konten dapat diaktifkan.
Tab Gunakan <ul class="tabs" data-tab> -tab> untuk membuat setiap opsi <li> elemen dan menambahkan .tab-title kelas untuk membuat.
Tip: Anda dapat menggunakan item yang dipilih saat .active kelas.
contoh
<Class Li = "tab-title aktif"> <a href = "#"> Depan </ 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>
Coba »
tab vertikal
tab vertikal Gunakan .vertical kategori:
tab beralih
Jika Anda ingin mengubah tab pengaturan, Anda dapat menggunakan <div> elemen ditambah .content kelas. Ditambah ID unik pada setiap tab, dan menghubungkannya dengan item daftar (<a href = "# menu1" membuka id = "menu1" konten pilihan). Akhirnya, semua pilihan pada konten <div> pada elemen, yang <div> elemen untuk menambahkan .tabs-content kelas, dan menginisialisasi Yayasan JS.
Catatan .active kelas secara otomatis ditambahkan ke tab yang sedang dipilih:
contoh
<Class Li = "tab-title aktif"> <a href = "#home"> Depan </ 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 = "tab-konten ">
<Class Div = "konten aktif" id = "rumah">
<H3> HOME </ h3>
<P> Rumah adalah tempat hati adalah .. </ p>
</ Div>
<Div class = "content" id = "menu1">
<H3> Menu 1 </ h3 >
<P> Beberapa teks, blabla < / p>
</ Div>
<Div class = "content" id = "menu2">
<H3> Menu 2 </ h3 >
<P> Beberapa teks lainnya. < / P>
</ Div>
<Div class = "content" id = "menu3">
<H3> Menu 3 </ h3 >
<P> tab terakhir. </ P>
</ Div>
</ Div>
<! - Initialize Yayasan JS ->
<Script>
$ (Dokumen) .ready (function () {
$ (Dokumen) .foundation ();
})
</ Script>
Coba »
tab Fade
Gunakan CSS untuk menyesuaikan tab memudar berlaku:
contoh
-webkit-animasi: fadeEffect 1s;
animasi: fadeEffect 1s;
}
@ -webkit-Keyframes fadeEffect {
dari {opacity: 0;}
untuk {opacity: 1;}
}
@keyframes fadeEffect {
dari {opacity: 0;}
untuk {opacity: 1;}
}
Coba »