Cara membuat: Judul tab
- Halaman sebelumnya Tab vertikal
- Halaman berikutnya Tab halaman penuh
Belajar cara membuat judul tab dengan CSS dan JavaScript.
Judul tab
Klik tombol "city" untuk menampilkan judul yang sesuai:
London
London adalah ibu kota kota Inggris.
Paris
Paris adalah ibu kota Perancis.
Tokyo
Tokyo adalah ibu kota Jepang.
Oslo
Oslo adalah ibu kota Norwegia.
Buat judul tab yang dapat diubah
Langkah pertama - Tambahkan HTML:
<div id="London" class="tabcontent"> <h1>London</h1> <p>London adalah ibu kota Inggris.</p> </div> <div id="Paris" class="tabcontent"> <h1>Paris</h1> <p>Paris adalah ibu kota Perancis.</p> </div> <div id="Tokyo" class="tabcontent"> <h1>Tokyo</h1> <p>Tokyo adalah ibu kota Jepang.</p> </div> <div id="Oslo" class="tabcontent"> <h1>Oslo</h1> <p>Oslo adalah ibu kota Norwegia.</p> </div> <button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> <button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> Buat tombol untuk membuka konten halaman khusus. Semua elemen <div> dengan class="tabcontent" disembunyikan secara default (dengan CSS & JS). Saat pengguna mengklik tombol - halaman konten yang "sesuai" dengan tombol ini akan dibuka.
Langkah kedua - Tambahkan CSS:
Atur gaya tombol dan konten halaman:
/* Atur gaya tombol halaman */ .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 25%; } /* Mengubah warna latar belakang tombol saat dihover */ .tablink:hover { background-color: #777; } /* Mengatur gaya konten tab default */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } /* Mengatur gaya konten tab khusus */ #London {background-color:red;} #Paris {background-color:green;} #Tokyo {background-color:blue;} #Oslo {background-color:orange;}
Tahap ketiga - Tambahkan JavaScript:
function openCity(cityName, elmnt, color) { // Menghapus semua elemen dengan class="tabcontent" 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/btn tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } // Menampilkan konten tab khusus document.getElementById(cityName).style.display = "block"; // Menambahkan warna khusus untuk tombol membuka konten tab elmnt.style.backgroundColor = color; } // Mendapatkan elemen dengan id="defaultOpen" dan kliknya document.getElementById("defaultOpen").click();
Halaman yang berhubungan
Panduan:Bagaimana untuk membuat tab
- Halaman sebelumnya Tab vertikal
- Halaman berikutnya Tab halaman penuh