How To

Cara Membuat Tab : Html – CSS – JS

Pelajari cara membuat tab dengan CSS dan JavaScript.

Tab

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

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style tab */.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style tombol didalam tab */.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Ubah warna background dari buttons on hover */.tab button:hover {
  background-color: #ddd;
}

/* Buat sebuah kelas tablink active/current */.tab button.active {
  background-color: #ccc;
}

/* Style tab content */.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<h2>Tab</h2>
<p>Klik pada tombol di dalam menu tab:</p>

<div class="tab">
  <button class="tablinks" >var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
</body>
</html>

Buat Tab yang Dapat Digeser

Langkah 1) Tambahkan HTML

Contoh:

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" >

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

Langkah 2) Tambahkan CSS

Style pada tombol dan konten tab.

Contoh:

/* Style tab */.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style tombol didalam tab */.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Ubah warna background dari buttons on hover */.tab button:hover {
  background-color: #ddd;
}

/* Buat sebuah kelas tablink active/current */.tab button.active {
  background-color: #ccc;
}

/* Style tab content */.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Langkah 3) Tambahkan JavaScript

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style tab */.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style tombol didalam tab */.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Ubah warna background dari buttons on hover */.tab button:hover {
  background-color: #ddd;
}

/* Buat sebuah kelas tablink active/current */.tab button.active {
  background-color: #ccc;
}

/* Style tab content */.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<h2>Tab</h2>
<p>Klik pada tombol di dalam menu tab:</p>

<div class="tab">
  <button class="tablinks" >

Fade in Tab

Jika Anda ingin memudarkan (fade in) konten tab, tambahkan CSS berikut.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style tab */.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style tombol didalam tab */.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Ubah warna background dari buttons on hover */.tab button:hover {
  background-color: #ddd;
}

/* Buat sebuah kelas tablink active/current */.tab button.active {
  background-color: #ccc;
}

/* Style tab content */.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
  
/* Fade in tab */@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>
</head>
<body>

<h3>Fade in Tab</h3>

<div class="tab">
  <button class="tablinks" >

Tampilkan tab secara default

Untuk membuka tab tertentu pada pemuatan halaman, gunakan JavaScript untuk “mengklik” pada tombol tab yang ditentukan.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style tab */.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style tombol didalam tab */.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Ubah warna background dari buttons on hover */.tab button:hover {
  background-color: #ddd;
}

/* Buat sebuah kelas tablink active/current */.tab button.active {
  background-color: #ccc;
}

/* Style tab content */.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<p> Dalam contoh ini, kami menggunakan JavaScript untuk "mengklik" tombol London, untuk membuka tab saat memuat halaman. </p>
  
<div class="tab">
  <button class="tablinks" >

Tutup tab

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

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style tab */.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style tombol di dalam tab */.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Ubah warna background tombol saat mengarahkan kursor */.tab button:hover {
  background-color: #ddd;
}

/* Buat kelas tablink active / current */.tab button.active {
  background-color: #ccc;
}

/* Style tab content */.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style button Close */.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: red;}
</style>
</head>
<body>

<h2>Tab</h2>
<p>Klik pada tombol x di pojok kanan atas untuk menutup tab saat ini:</p>

<div class="tab">
  <button class="tablinks" >and click on it
document.getElementById("defaultOpen").click();
</script>
   
</body>
</html>

Catur Kurnia Sari

Share
Tags: How To