Cara Membuat Vertical Tab Dengan HTML Dan CSS

Selamat datang kembali di laman tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di pembahasan tips seputar dunia laman. Di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Membuat Vertical Tab Dengan HTML Dan CSS dimana sebuah tab ini akan kita gunakan bagi membangun sebuah layout lokasi tempat tinggal. Di studi case kali ini saya akan membangun layout menggunakan tab html dan css dengan menunjukkan tempat tinggal cabang Source Code Aplikasi. Dengan menggunakan ini yakni cara lain bagi membangun sebuah halaman contact us di laman, saya berharap teman – teman dapat mengikuti langkah – langkah di bawah ini.

Pertama-tama – tama siapkan text editornya, kemudian bikin script html nya seperti gambar di bawah ini dan juga id setiap cabang nya

<h1>Cara Membangun Vertical Tab Dengan HTML Dan CSS</h1>
<div class=container>
  <h3>Hubungi dan Kunjungi Cabang Terdekat <a href=https://www.sourcecodeaplikasi.info>Source Code Aplikasi</a></h3>
  <div class=tab>
    <button class=tablinks onclick=openCity(event, 'srengseng') id=defaultOpen>Srengseng</button>
    <button class=tablinks onclick=openCity(event, 'grogol')>Grogol</button>
    <button class=tablinks onclick=openCity(event, 'depok')>Depok</button>
    <button class=tablinks onclick=openCity(event, 'tebet')>Tebet</button>
    <button class=tablinks onclick=openCity(event, 'gading')>Kelapa Gading</button>
  </div>

  <div id=srengseng class=tabcontent>
    <h4>Srengseng</h4>
    <p></p>
  </div>

  <div id=grogol class=tabcontent>
    <h4>Grogol</h4>
    <p></p> 
  </div>

  <div id=depok class=tabcontent>
    <h4>Depok</h4>
    <p></p>
  </div>
  <div id=tebet class=tabcontent>
    <h4>Tebet</h4>
    <p></p>
  </div>
  <div id=gading class=tabcontent>
    <h4>Kelapa gading</h4>
    <p></p>
  </div>
</div>

Teman – teman ikuti terus Cara Membuat Vertical Tab Dengan HTML Dan CSS, pada pengetikan script samakan dulu sesuai di script di atas ini termasuk pemberian id dan onclick di button nya, kemudian isikan tempat tinggal setiap cabang yang saya sediakan dengan tag p

Bila telah save dengan nama index.html, langkah berikutnya kita tambahkan style css nya

* {box-sizing: border-box}
.container{width: 1000px;margin: auto;}
h3{background-color: #274F8F;color: #fff;padding: 10px;}
h4{color:#274F8F;}
a{color: #fff;text-decoration:none;}
.tab {float: left;border: 1px solid #ccc;background-color: #f1f1f1;width: 17%;height: 300px;}
.tab button {
    display: block;
    background-color: inherit;
    color: black;
    padding: 10px 15px;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
}
.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}
.tabcontent {float: left;padding: 0px 12px;width: 70%;border-left: none;height: 300px;}

Dan jangan lupa tambahkan script javascript nya bagi menjalankan id nya

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

document.getElementById(defaultOpen).click();

Bila telah save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini

Karenanya tab akan menampilkan sesuai tempat tinggal nya yang adalah sebuah id di setiap cabang nya, bagaimana..?? Amat gampang bukan..??

Demikian di artikel kali ini mengenai Cara Membuat Vertical Tab Dengan HTML Dan CSS semoga bermanfaat dan menjadi bahan refrensi bagi teman – teman pada penyusunan layout laman nya. Terimakasih dan hingga Jumpa.

Sumber https://kursuswebsite.org