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.
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.
<!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;
}
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.
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.