Bagaimana untuk membuat: Tab halaman penuh

Belajar bagaimana untuk menggunakan CSS dan JavaScript untuk membuat tab halaman penuh yang menutupi seluruh jendela browser (tab layar penuh).

Buat tab halaman tunggal

Langkah pertama - Tambahkan HTML:

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Kontak</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">Tentang</button>
<div id="Home" class="tabcontent">
  <h3>Tempat Asal</h3>
  <p>Tempat asal adalah tempat hati.</p>
</div>
<div id="News" class="tabcontent">
  <h3>Berita</h3>
  <p>Beberapa berita hari ini!</p>
</div>
<div id="Contact" class="tabcontent">
  <h3>Kontak</h3>
  <p>Hubungi, atau datang untuk sedikit kopi.</p>
</div>
<div id="About" class="tabcontent">
  <h3>Tentang</h3>
  <p>Siapa kami dan apa yang kita lakukan.</p>
</div>

Buat tombol untuk membuka konten tab yang spesifik. Semua yang memiliki class="tabcontent" dari <div> Semua elemen secara default tersembunyi (melalui CSS dan JS). Saat pengguna mengklik tombol, ia akan membuka konten tab yang “sesuai” dengan tombol ini.

Langkah kedua - Tambahkan CSS:

Menentukan gaya koneksi dan konten tab (halaman penuh):

/* Menentukan tinggi body dan dokumen menjadi 100% untuk memungkinkan “tab halaman penuh” */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}
/* Menentukan gaya koneksi tab */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 25%;
}
.tablink:hover {
  background-color: #777;
}
/* Menata gaya konten tab (dan menambahkan tinggi: 100% ke halaman keseluruhan) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}

Langkah ketiga - Tambahkan JavaScript:

function openPage(pageName, elmnt, color) {
  // Menyembunyikan semua elemen dengan class="tabcontent" secara default
  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/boton
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  // Menampilkan konten tab yang spesifik
  document.getElementById(pageName).style.display = "block";
  // Menambahkan warna khusus untuk tombol yang digunakan untuk 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