How To

Cara Membuat Tab Satu Halaman Penuh

Pelajari cara membuat tab halaman penuh, yang menutupi seluruh jendela browser, dengan CSS dan JavaScript.

Tab Full Page

Klik pada link untuk menampilkan halaman “saat ini”.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

/ * Atur tinggi dan dokumen menjadi 100% * /
  body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab link */.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;
}

/ * Style pada konten tab (dan tambahkan tinggi: 100% untuk konten halaman penuh) * /
.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;}
</style>
</head>
<body>

<button class="tablink" >div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Rumah adalah tempat hati berada..</p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Beberapa berita hari ini baik!</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Hubungi, atau mampir untuk minum kopi.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Siapakah kita dan apa yang kita lakukan.</p>
</div>

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>

Membuat Tab Satu Halaman

Langkah 1) Tambahkan HTML

Contoh:

<button class="tablink" >

Buat tombol untuk membuka konten tab tertentu. Semua elemen dengan class = “tabcontent” disembunyikan secara default (dengan CSS & JS). Ketika pengguna mengklik tombol – maka akan membuka konten tab yang “cocok” dengan tombol ini.

Langkah 2) Tambahkan CSS

Style pada link dan konten tab (full page).

Contoh:

/ * Atur tinggi dan dokumen menjadi 100% * /
  body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab link */.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;
}

/ * Style pada konten tab (dan tambahkan tinggi: 100% untuk konten halaman penuh) * /
.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 3) Tambahkan JavaScript

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}

/ * Atur tinggi dan dokumen menjadi 100% * /
  body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

/* Style tab link */.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;
}

/ * Style pada konten tab (dan tambahkan tinggi: 100% untuk konten halaman penuh) * /
.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;}
</style>
</head>
<body>

<button class="tablink" >

Catur Kurnia Sari

Share
Tags: How To