· 30 Dec 2016

Membuat Tab dari Nol dengan jQuery

---

#jQuery #Javascript

Pada tutorial ini, kita akan belajar membuat Tab dari nol dengan JQuery.

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 HTML

Buatlah kode HTML seperti ini:

<div id="tab">
    <nav>
        <a href="#" class="active" data-id='1'>Tab 1</a>
        <a href="#" data-id='2'>Tab 2</a>
        <a href="#" data-id='3'>Tab 3</a>
    </nav>

    <div class="tab-content active" data-content='1'>
        Isi Tab 1
    </div>
    <div class="tab-content" data-content='2'>
        Isi Tab 2
    </div>
    <div class="tab-content" data-content='3'>
        Isi Tab 3
    </div>
</div>

Pada kode ini, kita menggunakan tag <nav> untuk label tab. Sebenarnya bisa juga menggunakan tag lain seperti list <ul>, namun biar lebih gampang diberikan CSS, kita pakai tag <nav> saja.

Perhatikan juga atribut data-id dan data-content, ini akan kita gunakan nanti di JQuery untuk menentukan tab mana yang harus dibuka saat tombol navigasi diklik.

Untuk saat ini, tampilannya seperti ini:

Nah, berikutnya kita akan memberikan CSS agar terlihat seperti Tab.

2. Membuat Kode CSS

Buatlah kode CSS seperti ini:

#tab nav {
  display: flex;
}

#tab nav a {
  color: black;
  text-decoration: none;
  padding: 0.5rem;
  border: 1px solid silver;
}

#tab nav .active {
  background: lightgreen;
}

.tab-content {
  display: none;
  
  border: 1px solid silver;
  padding: 1rem;
}

.tab-content.active {
    display: block;
}

Hasilnya:

Perhatikan!

Pada kode CSS.. kita membuat class .tab-content untuk mengatur tampilan tab. Secara default tab disembuyikan (display: none).

Kemudian class .tab-content.active untuk menampilkan isi tab secara default.

Nanti, isi tab akan kita ampilkan dan sembuyikan dengan JQuery.

Mari kita lanjut:

3. Membuat Kode JQuery/Javascript

Buatlah kode JQuery seperti ini:

$("#tab nav a").click(function(){
  const id = $(this).data('id');
  if(!$(this).hasClass('active')){
    $("#tab nav a").removeClass('active');
    $(this).addClass('active');
    
    $('.tab-content').hide();
    $(`[data-content=${id}]`).fadeIn();
  }
});

Pada kode ini, kita mendengarkan event click pada label tab atau link navigasi tab. Lalu menjalankan sebuah fungsi untuk membuka tab.

Penjelasannya seperti ini:

Pertama kita ambil dulu id tombol yang diklik:

const id = $(this).data('id');

Kemudian, kita cek tombol tersebut. Apakah dia sudah punya class CSS .active atau belum di atributnya.

Jika sudah punya, maka fungsi ini tidak mengerjakan apapun. Perhatikan di sana ada tanda ! di dalam if.

if(!$(this).hasClass('active')){
  // ...
}

Yang artinya, blok if ini akan dijalankan saat tombol yang diklik tidak punya class active.

Biar gampang, baca aja seperti ini:

Jika tombol ini tidak punya class active, maka buka isi tab dengan id yang sama dengan id tombol.

Sekarang perhatikan baris ini:

$("#tab nav a").removeClass('active');
$(this).addClass('active');

Kode ini berfungsi untuk menghapus class active pada semua tombol dan menambahkan class active pada tombol yang diklik saja.

Selanjutnya perhatikan kode ini:

$('.tab-content').hide();
$(`[data-content=${id}]`).fadeIn();

Kode ini berfungsi untuk menutup semua isi tab dan hanya membuka isi tab yang sama dengan id tombol.

Kita menggunakan fungsi fadeIn() untuk menampilkan isi tab.

Kita juga bisa menggunakan fungsi yang lain seperti show() dan slideDown().

4. Demo Hasil:

Apa Selanjutnya?

Selanjutnya, kamu bisa modifikasi kode CSS-nya agar terlihat lebih menarik.

Jika ada pertanyaa..

..mari sampaikan di kolom komentar!