Cara Membuat Tab Headers Dengan HTML dan CSS

Selamat datang kembali di website tips dan trik Dumet School, halo teman – teman berjumpa lagi dengan saya dalam pembahasan tips dan trik seputar dunia website. Di kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Tab Headers Dengan HTML dan CSS dimana kita akan membuat sebuah tab dengan tampilan di posisi atas yang saya sebut Tab Headers. Dalam pembuatannya kita akan menggunakan dengan html dan css serta javascript untuk menjalankan sebuah tab nya. Nah di bawah ini adalah hasil layout yang nanti kita akan buat

Maka jika di klik pada masing – masing menu akan menampilkan isi konten bergantian berdasarkan kategory menu nya, dimana dalam kasus ini saya membuat sebuah kategory menu dengan beberapa nama – nama kota yang ada di indonesia kemudian pada tab headers nya terdapat deskripsi dari kota tersebut. Langsung saja kita pratekkan Cara Membuat Tab Headers Dengan HTML dan CSS teman – teman siapkan text editornya kemudian ketikkan script html nya di bawah ini

Isikan id pada setiap div dan button yang sama untuk nanti kita hubungkan dengan css dan javascript, nah langkah berikutnya kita berikan css nya

.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;}
.tabcontent {color: white;display: none;padding: 50px;text-align: center;}
#Jakarta {background-color:gray;}
#Surabaya {background-color:orange;}
#Jogja {background-color:red;}
#Medan {background-color:green;}
.container{width: 1200px; margin: auto;}

Jika sudah save dengan nama index.html, langkah selanjutnya kita berikan script javascript nya untuk mengaktifkan tab headers.

function openCity(cityName,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(cityName).style.display = "block";
    elmnt.style.backgroundColor = color;

}
document.getElementById("defaultOpen").click();

Kemudian save dan jalankan pada browsernya, maka tab headers berhasil kita buat, jika kita ketikkan masing – masing menu maka akan menampilkan deskripsi menu

Dengan begitu teman – teman dapat membuat tab headers sendiri, tinggal dikembangkan lagi dari hasil latihan kali ini supaya lebih bagus output yang dihasilkan. Demikianlah artikel Cara Membuat Tab Headers Dengan HTML dan CSS kita akan membahas tips dan trik seputar dunia website pada artikel yang akan datang. Sekian dari saya, terimakasih dan sampai jumpa.

Semoga bermanfaat.

Cara Membuat Tab Headers Dengan HTML dan CSS

Kategori