Tab Sederhana dengan jQuery

simple tab

Keuntungan yang didapat dengan membuat sebuah navigasi tab dengan jQuery adalah halaman tidak perlu dimuat ulang hanya untuk berganti tab yang aktif. Kenapa hal itu bisa terjadi? Karena sebenarnya semua halaman yang ada di seluruh tab sudah dimuat sejak pertama kali kita membuka web. Teknik ini yang dipakai untuk bizcard saya. Berikut ini adalah kode jQuery yang digunakan.

$(document).ready(function() {
  $('#tab1').fadeIn('slow');
  $('ul#nav li a').click(function() {
    $('ul#nav li a').removeClass('aktif');
    $(this).addClass("aktif");
    $('.tab_konten').hide();
    var aktif = $(this).attr('href');
    $(aktif).fadeIn('slow');
    return false;
  });
});

Sedangkan ini adalah HTML-nya.

<ul id="nav"><!-- navigasi -->
  <li><a href="#tab1" class="about aktif"><span>About Me</span></a></li>
  <li><a href="#tab2" class="network"><span>Networks</span></a></li>
  <li><a href="#tab3" class="contact"><span>Contact</span></a></li>
</ul>
 
<div id="konten"><!-- mulai konten -->
  <div style="display: none;" id="tab1" class="tab_konten">
    <!-- konten #tab1 -->
  </div>
  <div style="display: none;" id="tab2" class="tab_konten">
    <!-- konten #tab2 -->
  </div>
  <div style="display: none;" id="tab3" class="tab_konten">
    <!-- konten #tab3 -->
  </div>
</div>

Penjelasannya adalah sebagai berikut. Pada kondisi awal, ketiga tab dalam posisi tidak aktif (style=”display: none;”). Kemudian pada saat halaman web dimuat pertama kali, #tab1 diaktifkan (lihat baris ke-2 kode JavaScript) dengan efek fade in, sekaligus menampilkan isinya.

Berikutnya adalah ketika ada sebuah tab yang diklik, semua class=”aktif” dihilangkan kecuali pada tab yang dipilih (baris ke-4 dan ke-5 kode JavaScript). Begitu pula dengan isinya, semua disembunyikan kecuali tab yang dipilih.

Bagaimana cara untuk menemukan tab yang aktif? Cari attribute href pada class yang aktif, value-nya menunjukkan mana tab yang harus ditampilkan (baris ke-7 dan ke-8 kode JavaScript).

Catatan ini disadur dan ditulis ulang dengan modifikasi seperlunya dari blog ini. Gambar juga diambil dari situ.

About Sibudi

Ubuntu user | Loves books | Blogger | Web Developer | Learn PHP, JavaScript, Ruby & Python the hard way

07. November 2011 by Sibudi
Categories: jQuery | Tags: , , , , | 5 comments

Comments (5)

  1. Jquerynya mantap mas, diatas itu bisa di widget WP gak.? kalau bsa caranya gimana.? 🙂

  2. master itu jquerynya tabnya brarti statis ya?, bisa gak dibuat dinamis, kayak dibrowser2 gitu, jadi ada icon buat create tab baru

  3. master itu scricpt nya kenpa tab yang aktif ndak mau ikut pindah?

  4. master itu tabnya yang horizontal apa yang vertikal?
    terus jquery yang dipakai jquery type berapa?

Leave a Reply

Required fields are marked *