cara membuat tab dengan HTML,CSS dan JavaScript

 

Tab

Tab sempurna untuk aplikasi web satu halaman, atau untuk halaman web yang mampu menampilkan subjek yang berbeda

Langkah 1) Tambahkan HTML

Buat tombol untuk membuka konten tab tertentu. Semua elemen <div> dengan class="tabcontent"disembunyikan secara default (dengan CSS & JS). Ketika pengguna mengklik tombol - itu akan membuka konten tab yang "cocok" dengan tombol ini.

Langkah 2) Tambahkan CSS:

Style pada tombol dan konten tab:

Maka Hasilnya Seperti berikut dan masih belum muncul tabcontent dengan tambahkan 

JavaScript Selanjutnya

Langkah 3) Tambahkan JavaScript:

Hasilnya Akan bisa berikut jadi untuk menampilkan tabcontent harus mengunakan JavaScript 

Fade in Tabs:

Jika Anda ingin memudarkan konten tab membuat effect saat di klik, tambahkan CSS berikut:

.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

Tutup tab:

Jika Anda ingin menutup tab tertentu, gunakan JavaScript untuk menyembunyikan tab dengan mengklik tombol:

<!-- Click on the <span> element to close the tab -->

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  <span onclick="this.parentElement.style.display='none'">x</span>
</div>

Dan Tambahkan ini pada style css:

/* Style the close button */

.topright {

  float: right;

  cursor: pointer;

  font-size: 28px;

}

FULL CODING DI BAWAH INI