Pada tutorial ini, kita akan belajar membuat Tab dari nol dengan JQuery. Show Tujuannya agar kamu bisa paham, bagaimana cara kerja algoritma tab. Siap.. Mari kita mulai! Apa itu Tabs?Coba perhatikan binder yang kamu miliki, di sana ada Tabs yang berfungsi untuk memudahkanmu membuka halaman tertentu. Tab dalam web juga sama. Tab di web berfungsi untuk menampilkan beberapa konten atau halaman menjadi satu agar bisa dibuka dengan mudah. Mari kita mulai latiham membuat tab: 1. Membuat Kode HTMLBuatlah kode HTML seperti ini:
Pada kode ini, kita
menggunakan tag Perhatikan juga atribut Untuk saat ini, tampilannya seperti ini: Nah, berikutnya kita akan memberikan CSS agar terlihat seperti Tab. 2. Membuat Kode CSSBuatlah kode CSS seperti ini:
Hasilnya: Perhatikan! Pada kode CSS.. kita membuat class Kemudian class Nanti, isi tab akan kita ampilkan dan sembuyikan dengan JQuery. Mari kita lanjut: 3. Membuat Kode JQuery/JavascriptBuatlah kode JQuery seperti ini:
Pada kode ini, kita mendengarkan event Penjelasannya seperti ini: Pertama kita ambil dulu id tombol yang diklik:
Kemudian, kita cek tombol tersebut. Apakah dia sudah punya class CSS Jika sudah punya, maka fungsi ini tidak mengerjakan apapun. Perhatikan di sana ada tanda
Yang artinya, blok if ini akan dijalankan saat tombol yang diklik tidak punya class Biar gampang, baca aja seperti ini: Jika tombol ini tidak punya class Sekarang perhatikan baris ini:
Kode ini berfungsi untuk
menghapus class Selanjutnya perhatikan kode ini:
Kode ini berfungsi untuk menutup semua isi tab dan hanya membuka isi tab yang sama dengan Kita menggunakan fungsi Kita juga bisa menggunakan fungsi yang lain seperti 4. Demo Hasil:Apa Selanjutnya?Selanjutnya, kamu bisa modifikasi kode CSS-nya agar terlihat lebih menarik. Jika ada pertanyaa.. ..mari sampaikan di kolom komentar! |