1. Code HTML

<div class="tabs">
    <div class="tab-header">
        <div class="active">Home</div>
        <div>Explore</div>
        <div>Contact</div>
        <div>About</div>
    </div>
    <div class="tab-indicator">
        <div></div>
    </div>
    <div class="tab-body">
        <div class="active">
            <h2>Home</h2>
            <p>Content...</p>
        </div>
        <div>
            <h2>Explore</h2>
            <p>...</p>
        </div>
        <!--more divs-->
    </div>
</div>

Program di atas adalah struktur HTML untuk membuat tab navigasi sederhana. Berikut adalah penjelasan untuk setiap bagian dari struktur tersebut:

1. Element .tabs: Ini adalah kontainer utama untuk seluruh tab. Ini mengelompokkan semua elemen tab bersama.

2. Element .tab-header: Ini adalah bagian header dari tab. Ini berisi daftar judul tab yang dapat diklik oleh pengguna untuk beralih antar tab. Setiap judul tab ditempatkan di dalam elemen div dengan kelas .tab-header, dan tab yang sedang aktif memiliki kelas tambahan .active.

3. Element .tab-indicator: Ini adalah elemen yang menandai tab yang sedang aktif. Biasanya, ini adalah garis atau indikator visual lainnya yang menyoroti tab yang sedang aktif. Dalam contoh ini, indikator tersebut ditempatkan di dalam div dengan kelas .tab-indicator.

4. Element .tab-body: Ini adalah bagian tubuh dari tab. Ini berisi konten untuk setiap tab. Setiap konten tab ditempatkan dalam elemen div dengan kelas .tab-body. Tab yang sedang aktif memiliki kelas tambahan .active.

2. Code CSS

/* Pertama */

.tabs {
    position: relative;
    width: 100%;
}

.tabs.title {
    padding: 50px 20px 100px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    background: #24A6DB;
}

.tabs.tab-header,
.tabs.tab-indicator,
.tabs.tab-body {
    margin: 0 auto;
    max-width: 650px;
    width: 100%;
    position: relative;
}

.tabs.tab-header {
    width: 100%;
    display: flex;
    align-items: center;
    height: 60px;
    margin-top: -60px;
    z-index: 2;
}

/* Kedua */

.tabs tab-header > div {
    width: 25%;
    text-align: center;
    padding: 15px 0px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: color 300ms ease-in-out;
}

.tabs.tab-header > div.active {
    color: #24A6DB;
}

.tabs.tab-indicator {
    position: relative;
    height: 60px;
    margin-top: -66px;
}

.tabs.tab-indicator > div {
    position: absolute;
    left: 0%;
    width: 25%;
    height: 100%;
    background: #fff;
    border-radius: 10px 10px 0px 0px;
    transition: all 300ms ease-in-out;
}

.tabs-tab-body {
    position: relative;
}

.tabs-tab-body > div {
    position: absolute;
    opacity: 0;
    padding: 20px;
    top: -100vh;
}

.tabs-tab-body > div {
    margin: 10px 0px;
}

.tabs-tab-body > div p {
    color: #555;
    font-size: 15px;
}

.tabs-tab-body > div.active {
    top: 8px;
    opacity: 1;
    transition: top 100ms ease-in-out, 
    opacity 500ms ease-in-out 0ms;
}

Program di atas adalah kumpulan aturan CSS yang mendefinisikan gaya untuk membuat tata letak dan penampilan visual dari tab navigasi yang didefinisikan dalam struktur HTML yang diberikan sebelumnya. Berikut adalah penjelasan dari setiap bagian dari CSS tersebut:

1. .tabs: Ini adalah kelas yang digunakan untuk menetapkan beberapa properti umum yang berlaku untuk seluruh elemen yang terkait dengan tab. Dalam hal ini, itu mengatur posisi relatif dan lebar elemen agar sesuai dengan lebar kontainer induk.

2. .tabs.title: Ini adalah kelas yang diterapkan pada elemen judul di dalam tab. Ini mengatur tata letak, gaya teks, warna, dan latar belakang judul tab. Judul tab memiliki padding untuk memberikan ruang kosong di sekitarnya, dan latar belakang serta warna teks yang berbeda untuk menonjolkan judul dari latar belakang tab.

3. .tabs.tab-header, .tabs.tab-indicator, .tabs.tab-body: Ini adalah kumpulan kelas yang digunakan untuk menetapkan beberapa properti umum yang berlaku untuk bagian-bagian khusus dari tab navigasi, yaitu bagian header, indikator, dan konten tubuh. Ini termasuk mengatur margin agar konten berada di tengah, membatasi lebar maksimum agar sesuai dengan lebar yang diinginkan, dan memberikan posisi relatif untuk menetapkan konteks posisi.

4. .tabs.tab-header: Ini adalah kelas yang diterapkan pada bagian header dari tab navigasi. Ini mengatur lebar, tata letak, dan penampilan visual header. Dalam hal ini, header tab diposisikan secara relatif dan ditampilkan dalam satu baris dengan bantuan flexbox (display: flex) untuk mengelompokkan elemen-elemen header ke dalam satu baris. Kemudian, setiap elemen header diatur agar berada di tengah secara vertikal dengan align-items: center.

5. .tabs tab-header > div: Ini adalah pemilih CSS yang digunakan untuk menargetkan setiap elemen div yang berada di dalam .tab-header di dalam elemen .tabs. Aturan ini mengatur properti gaya seperti lebar, tata letak teks, padding, warna teks, ukuran font, dan kursor mouse. Transisi juga ditambahkan sehingga perubahan warna teks terjadi secara halus dalam waktu 300 milidetik dengan efek yang memudahkan mata (ease-in-out).

6. .tabs.tab-header > div.active: Ini adalah pemilih CSS yang digunakan untuk menargetkan elemen div yang aktif (diberi kelas .active) di dalam .tab-header di dalam elemen .tabs. Aturan ini mengatur warna teks menjadi biru (#24A6DB) untuk menonjolkan tab yang sedang aktif.

7. .tabs.tab-indicator: Ini adalah kelas yang diterapkan pada elemen yang menunjukkan indikator posisi tab saat ini. Dalam hal ini, kelas tersebut mengatur posisi relatif dan tinggi dari elemen indikator, serta memberikan margin atas negatif untuk menyesuaikan dengan posisi header tab.

8. .tabs.tab-indicator > div: Ini adalah pemilih CSS yang digunakan untuk menargetkan elemen div di dalam .tab-indicator di dalam elemen .tabs. Aturan ini mengatur posisi absolut, lebar, tinggi, latar belakang, dan efek transisi dari elemen indikator. Indikator diberi latar belakang putih dengan sudut bulat pada bagian atasnya dan memiliki transisi yang mulus untuk semua properti, sehingga perubahan posisi terjadi secara halus dalam waktu 300 milidetik dengan efek yang memudahkan mata (ease-in-out).

Seluruh aturan CSS tersebut mengarah pada pembentukan tata letak yang sesuai dan penampilan visual yang menarik untuk tab navigasi yang diberikan dalam struktur HTML.

3. Code JavaScript

let tabs = document.querySelector(".tabs");
let tabHeader = tabs.querySelector(".tab-header");
let tabHeaderElements = tabs.querySelectorAll(".tab-header > div");
let tabBody = tabs.querySelector(".tab-body");
let tabBodyElements = tabs.querySelectorAll(".tab-body > div");
let tabIndicator = tabs.querySelector(".tab-indicator > div");

for (let i = 0; i < tabHeaderElements.length; i++) {
    tabHeaderElements[i].addEventListener("click", function() {
        tabHeader.querySelector(".active").classList.remove("active");
        tabHeaderElements[i].classList.add("active");
        tabBody.querySelector(".active").classList.remove("active");
        tabBodyElements[i].classList.add("active");
        tabIndicator.style.left = `${i * 25}%`;
    });
}

Program di atas adalah bagian dari JavaScript yang bertujuan untuk memberikan interaktivitas pada elemen-elemen tab navigasi yang telah didefinisikan dalam struktur HTML. Berikut adalah penjelasan singkat mengenai setiap bagian dari program tersebut:

1. Deklarasi Variabel: Pada blok pertama, variabel-variabel diinisialisasi dengan mengambil referensi ke elemen-elemen HTML yang sesuai menggunakan metode document.querySelector dan document.querySelectorAll. Variabel-variabel tersebut adalah:

   • tabs: Merepresentasikan elemen dengan kelas .tabs, yang merupakan kontainer utama untuk semua elemen tab.
   • tabHeader: Merepresentasikan elemen dengan kelas .tab-header, yang merupakan bagian header dari tab.
   • tabHeaderElements: Merepresentasikan semua elemen div yang merupakan bagian dari .tab-header.
   • tabBody: Merepresentasikan elemen dengan kelas .tab-body, yang merupakan bagian tubuh dari tab.
   • tabBodyElements: Merepresentasikan semua elemen div yang merupakan bagian dari .tab-body.
   • tabIndicator: Merepresentasikan elemen dengan kelas .tab-indicator, yang merupakan elemen yang menunjukkan indikasi posisi tab saat ini.

2. Loop untuk Menambahkan Event Listener: Selanjutnya, sebuah loop dilakukan untuk setiap elemen dalam tabHeaderElements. Untuk setiap elemen tersebut, sebuah event listener ditambahkan untuk menanggapi event klik. Ketika sebuah tab di-klik, event listener tersebut akan melakukan hal-hal berikut:

   • Menghapus kelas .active dari elemen header tab yang sedang aktif.
   • Menambahkan kelas .active pada elemen header tab yang diklik.
   • Menghapus kelas .active dari elemen body tab yang sedang aktif.
   • Menambahkan kelas .active pada elemen body tab yang sesuai dengan header tab yang diklik.
   • Mengatur posisi dari tabIndicator menggunakan properti style.left, sehingga indikator berpindah ke tab yang sesuai. Posisi indikator dihitung berdasarkan indeks i (urutan tab) dan lebar yang diinginkan untuk setiap tab (25%).

Dengan cara ini, saat pengguna mengklik tab, konten yang sesuai akan ditampilkan, dan indikator visual juga akan berpindah ke tab yang aktif. Ini memberikan pengalaman pengguna yang lebih baik saat berinteraksi dengan tab navigasi.

4. Hasil