Membuat Tab Menu Sederhana dengan jQuery

Pada tulisan kali ini saya akan menjelaskan secara singkat cara membuat tab menu hanya dengan jQuey tanpa bantuan plugin jquery itu sendiri. Keuntungan yang didapat dengan membuat sebuah navigasi tab dengan jQuery adalah halaman yang kita tampilkan tidak perlu dimuat ulang hanya untuk berganti tab yang aktif. Oke kita mulai membuatnya untuk pertama kita buat dulu struktur kontentnya sebagai berikut

Bisa dilihat pada script diatas saya telah membuat 3 tab dimana setiap tab diberikan attribute ID tab1, tab2, dan tab3. Kemudian kita buat menu tabnya contohnya seperti berikut

Setelah kita membuat struktur HTML dari tab tersebut tentu ini belum akan berbentuk tab perlu di desain atau diberikan style dengan menggunakan css seperti ini lah kode css yang kita gunakan

Penjelasannya :
Pada kondisi pertama ketiga tab dalam posisi tidak aktif dimana terdapat style="display: none". Kemudian pada saat halaman web dimuat pertama kali yakni #tab1 diaktifkan dengan efek fade in sekaligus menampilkan isinya. Berikutnya adalah ketika ada sebuah tab yang diklik semua class="aktif" dihilangkan kecuali pada tab yang dipilih. Begitu pula dengan isinya semua disembunyikan kecuali tab yang dipilih. Berikut kode jQuerynya

Bagaimana cara untuk menemukan tab yang aktif ? Cari attribute href pada class yang aktif ambil nilai valuenya menunjukkan mana tab yang harus ditampilkan.
Hasil dari kode di atas adalah sebagai berikut :

Demikian tutorial kita kali ini, Semoga bermanfaat.

15 November 2015

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat