Sibudi </>

Tab Sederhana dengan jQuery

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.

07. November 2011 by Sibudi
Categories: jQuery | Tags: CSS, HTML, JavaScript, jQuery, Snippet | 5 comments