Cara membuat: Judul tab

Belajar cara membuat judul tab dengan CSS dan JavaScript.

Judul tab

Klik tombol "city" untuk menampilkan judul yang sesuai:

London

London adalah ibu kota kota Inggris.

Paris

Paris adalah ibu kota Perancis.

Tokyo

Tokyo adalah ibu kota Jepang.

Oslo

Oslo adalah ibu kota Norwegia.

Coba sendiri

Buat judul tab yang dapat diubah

Langkah pertama - Tambahkan HTML:

<div id="London" class="tabcontent">
  <h1>London</h1>
  <p>London adalah ibu kota Inggris.</p>
</div>
<div id="Paris" class="tabcontent">
  <h1>Paris</h1>
  <p>Paris adalah ibu kota Perancis.</p>
</div>
<div id="Tokyo" class="tabcontent">
  <h1>Tokyo</h1>
  <p>Tokyo adalah ibu kota Jepang.</p>
</div>
<div id="Oslo" class="tabcontent">
  <h1>Oslo</h1>
  <p>Oslo adalah ibu kota Norwegia.</p>
</div>
<button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button>
<button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button>
<button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button>
<button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button>
Buat tombol untuk membuka konten halaman khusus. Semua elemen <div> dengan class="tabcontent" disembunyikan secara default (dengan CSS & JS). Saat pengguna mengklik tombol - halaman konten yang "sesuai" dengan tombol ini akan dibuka.

Langkah kedua - Tambahkan CSS:

Atur gaya tombol dan konten halaman:

/* Atur gaya tombol halaman */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}
/* Mengubah warna latar belakang tombol saat dihover */
.tablink:hover {
  background-color: #777;
}
/* Mengatur gaya konten tab default */
.tabcontent {
  color: white;
  display: none;
  padding: 50px;
  text-align: center;
}
/* Mengatur gaya konten tab khusus */
#London {background-color:red;}
#Paris {background-color:green;}
#Tokyo {background-color:blue;}
#Oslo {background-color:orange;}

Tahap ketiga - Tambahkan JavaScript:

function openCity(cityName, elmnt, color) {
  // Menghapus semua elemen dengan class="tabcontent"
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Menghapus warna latar belakang semua tautan tab/btn
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  // Menampilkan konten tab khusus
  document.getElementById(cityName).style.display = "block";
  // Menambahkan warna khusus untuk tombol membuka konten tab
  elmnt.style.backgroundColor = color;
}
// Mendapatkan elemen dengan id="defaultOpen" dan kliknya
document.getElementById("defaultOpen").click();

Coba sendiri

Halaman yang berhubungan

Panduan:Bagaimana untuk membuat tab