Membuat Tab Navigasi dan Konten Dinamis dengan JavaScript

Tab navigasi adalah cara menampilkan beberapa bagian konten dalam satu halaman tanpa perlu memuat ulang. Misalnya, halaman produk dengan tab “Deskripsi”, “Spesifikasi”, dan “Ulasan”. Saat pengguna klik salah satu tab, hanya konten terkait yang tampil. Untuk itu dalam tutorial kali ini, kita akan membahas cara Membuat Tab Navigasi dan Konten Dinamis dengan JavaScript.

Dengan JavaScript, kita bisa membuat sistem tab yang dinamis, ringan, dan mudah dikustomisasi tanpa library tambahan.

Struktur HTML Dasar Tab

Berikut struktur sederhana untuk membuat tab:

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="tab1">Deskripsi</button>
    <button class="tab-btn" data-tab="tab2">Spesifikasi</button>
    <button class="tab-btn" data-tab="tab3">Ulasan</button>
  </div>

  <div class="tab-content active" id="tab1">
    <p>Ini adalah deskripsi produk.</p>
  </div>
  <div class="tab-content" id="tab2">
    <p>Spesifikasi lengkap produk ditampilkan di sini.</p>
  </div>
  <div class="tab-content" id="tab3">
    <p>Ulasan dari pelanggan akan muncul di sini.</p>
  </div>
</div>

CSS untuk Tampilan Tab

Tambahkan gaya agar tampilan tab lebih menarik:

.tab-container {
  width: 80%;
  margin: 30px auto;
  font-family: sans-serif;
}

.tab-buttons {
  display: flex;
  justify-content: space-around;
  border-bottom: 2px solid #ccc;
}

.tab-btn {
  background: none;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-weight: bold;
  transition: color 0.3s, border-bottom 0.3s;
}

.tab-btn.active {
  color: #007bff;
  border-bottom: 2px solid #007bff;
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

JavaScript untuk Mengganti Tab

Sekarang tambahkan logika untuk menampilkan konten sesuai tab yang diklik:

const tabButtons = document.querySelectorAll(".tab-btn");
const tabContents = document.querySelectorAll(".tab-content");

tabButtons.forEach(button => {
  button.addEventListener("click", () => {
    // Hapus status aktif dari semua tab
    tabButtons.forEach(btn => btn.classList.remove("active"));
    tabContents.forEach(content => content.classList.remove("active"));

    // Tambahkan status aktif ke tab yang diklik
    button.classList.add("active");
    const target = document.getElementById(button.dataset.tab);
    target.classList.add("active");
  });
});

Penjelasan:

• data-tab menghubungkan tombol tab dengan konten yang sesuai.

• Saat tombol diklik, semua tab disembunyikan lalu konten target ditampilkan.

• Transisi fadeIn membuat perubahan konten lebih halus.

Studi Kasus: Tab untuk Halaman Profil

Contoh penerapan pada halaman profil pengguna:

<div class="tab-container">
  <div class="tab-buttons">
    <button class="tab-btn active" data-tab="bio">Biodata</button>
    <button class="tab-btn" data-tab="post">Postingan</button>
    <button class="tab-btn" data-tab="settings">Pengaturan</button>
  </div>

  <div class="tab-content active" id="bio">
    <p>Nama: Arvian<br>Profesi: Web Developer</p>
  </div>
  <div class="tab-content" id="post">
    <p>Menampilkan daftar postingan terbaru pengguna.</p>
  </div>
  <div class="tab-content" id="settings">
    <p>Form pengaturan profil akan muncul di sini.</p>
  </div>
</div>

Hasilnya: pengguna bisa berpindah antar tab tanpa reload halaman, membuat pengalaman browsing lebih cepat dan nyaman.

Tips Pengembangan Lanjutan

Kamu bisa mengembangkan sistem tab ini dengan fitur tambahan seperti:

• Simpan tab terakhir yang dibuka menggunakan localStorage.

• Tambahkan efek animasi slide atau fade dengan CSS.

• Gunakan AJAX untuk memuat konten tab dari server tanpa reload.

Kesimpulan

Dengan JavaScript, kamu bisa membuat tab navigasi dinamis yang efisien dan mudah diintegrasikan ke berbagai halaman web. Fitur ini membantu menjaga tampilan web tetap rapi, interaktif, dan ramah pengguna.