htmlcssjavascriptkomponenPemula9 mnt baca

Tabs Interaktif

Konten berganti-ganti lewat tab seperti di halaman produk e-commerce.

Apa Itu Tabs?

Tabs adalah pola "satu tempat, banyak isi": barisan tombol di atas, panel konten di bawah. Klik tombol A tampil konten A, tombol B tampil konten B. Kamu melihatnya di halaman produk (Deskripsi / Spesifikasi / Ulasan) dan di pengaturan aplikasi.

Langkah Membangun

HTML: Dua bagian sejajar: <div class="tab-tombol"> berisi tombol-tombol (masing-masing punya data-tab="id-panel"), dan <div class="tab-panel"> berisi panel-panel konten dengan id yang cocok.

CSS: Tombol tab aktif punya gaya berbeda (background ungu, teks putih). Panel disembunyikan dengan display: none, panel aktif ditampilkan (display: block) dengan animasi fade.

JS: Polanya sama seperti menu aktif di navbar, tapi dua kelompok:

  1. Hapus class aktif dari semua tombol dan panel.
  2. Tambahkan aktif ke tombol yang diklik dan panel yang id-nya cocok dengan dataset.tab.

Atribut data-* adalah cara resmi HTML menyimpan data kustom. data-tab="deskripsi" dibaca di JS sebagai tombol.dataset.tab.

Kesalahan Umum

  • Id panel tidak cocok dengan data-tab sehingga klik tidak menampilkan apa-apa (cek ejaan).
  • Semua panel terlihat saat halaman dimuat (pastikan hanya panel pertama yang punya class aktif di HTML awal).
  • Tombol tab memakai <a href="#"> sehingga halaman meloncat (pakai <button type="button">).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Tab dengan URL Hash

Buat tab bisa dibagikan lewat link: saat tab diklik, ubah URL hash (misal #spesifikasi), dan saat halaman dibuka dengan hash tersebut, tab yang sesuai langsung aktif.