Tab dalam HTML dengan Javascript ~ Pemrograman dan Teknologi

Tab adalah bagian dari program atau halaman HTML yang digunakan untuk menampilkan satu bagian tertentu dan menyembunyikan bagian lain yang tidak diperlukan. Untuk menampilkan tab dan isinya, pertama kita harus membuat tombol tabnya dengan div atau bisa juga button. Kita bisa memilih isi tab yang akan ditambilkan dengan tombol tersebut.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styleku.css">
</head>
<body>

<div class="tab">
  <div class="tabku" onclick="buka_tab(event, 'tab1')">Tab1</div>
  <div class="tabku" onclick="buka_tab(event, 'tab2')">Tab2</div>
  <div class="tabku" onclick="buka_tab(event, 'tab3')">Tab3</div>
</div>

<div id="tab1" class="isi_tab">
  <h3>Tab 1</h3>
  <p>Isi Tab 1</p>
</div>

<div id="tab2" class="isi_tab">
  <h3>Tab 2</h3>
  <p>Isi Tab 2</p> 
</div>

<div id="tab3" class="isi_tab">
  <h3>Tab 3</h3>
  <p>Isi Tab 3</p>
</div>

<script src="scriptku.js">
</script>
   
</body>
</html>

Untuk mengubah tampilannya, gunakan CSS sehingga pointer, warna dan pseudo element-nya bisa kita atur sesuai keinginan kita. Kalian bisa meletakkan kode CSS berikut ini di dalam tag style atau file CSS eksternal. Kalian juga harus memastikan bahwa semua tombol isi tab disembunyikan dengan CSS.

.tab {
  overflow: hidden;
  border-bottom:2px solid #0011FF;
  background-color: #333;
  color:white;
}

.tab div {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
}

.tab div:hover {
  background-color: #FFCC00;
}

.tab div.active {
  background-color: #0000FF;
}

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

Simpan CSS-nya dalam file styleku CSS. Selanjutnya kita akan menambahkan scriptnya. Kita akan membiarkan isi tab yang tidak diperlukan tersembunyi, dan hanya menampilkan salah satunya.

function buka_tab(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("isi_tab");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tabku");
  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";
}
var tablinks = document.getElementsByClassName("tabku");
tablinks[0].className += " active";
var tablinks = document.getElementsByClassName("isi_tab");
tablinks[0].style.display = "block";

Jalankan kode HTML-nya dan lihat hasilnya!!!

Setelah selesai menyimpan semua file, buka file HTML-nya di browser. Klik tab-nya jika halaman sudah terbuka.

Selanjutnya, kalian bisa mengubah warna dari tombol tab dan isi tabnya dengan mengubah CSS-nya. Kalian juga bisa mengubah Javascriptnya kalau ingin menambahkan kegunaan lain dalam tab.