Cara Membuat Tab Headers Dengan HTML dan CSS

Selamat datang kembali di laman tips dan trik Source Code Aplikasi, halo teman – teman berjumpa lagi dengan saya pada pembahasan tips dan trik seputar dunia laman. Di kesempatan kali ini saya akan memberikan tips mengenai Cara Membuat Tab Headers Dengan HTML dan CSS dimana kita akan membangun sebuah tab dengan tampilan di posisi atas yang saya sebut Tab Headers. Pada pembuatannya kita akan menggunakan dengan html dan css serta javascript bagi menjalankan sebuah tab nya. Nah di bawah ini ialah hasil layout yang nanti kita akan bikin

Karenanya sekiranya di klik di masing – masing fitur akan menampilkan isi konten bergantian merujuk pada kategory fitur nya, dimana pada kasus ini saya membangun sebuah kategory fitur dengan beberapa nama – nama kota yang terdapat di indonesia kemudian di tab headers nya terdapat keterangan dari kota tersebut. Seketika 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 di setiap div dan button yang sama bagi 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;}

Seandainya telah save dengan nama index.html, langkah berikutnya kita berikan script javascript nya bagi 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 di browsernya, karenanya tab headers berhasil kita bikin, sekiranya kita ketikkan masing – masing fitur karenanya akan menampilkan keterangan fitur

Dengan semacam itu teman – teman dapat membangun tab headers sendiri, tinggal dikembangkan lagi dari hasil latihan kali ini supaya lebih bagus output yang diraih. Demikianlah artikel Cara Membuat Tab Headers Dengan HTML dan CSS kita akan membahas tips dan trik seputar dunia laman di artikel yang akan datang. Sekianlah dari saya, terimakasih dan hingga jumpa.

Semoga bermanfaat.

 

Sumber https://kursuswebsite.org