Membuat Tab View Dengan Onclick Event

Beberapa hari yang kemudian aku sudah memposting cara menciptakan show hide div sederhana di postingan. Kenapa dibilang sederhana? Karena di situ kita hanya menciptakan show hide div dengan memakai onclick event. Dengan onclick event maka kita menciptakan perintah yang lebih sederhana daripada kita menciptakan perintahnya dengan javascript.

Silahkan baca lagi: Membuat Show Hide Div Sederhana Di Postingan

Nah pada postingan kali ini yaitu bergotong-royong pengembangan dari onclick event dari postingan sebelumnya. Seperti yang telah aku katakan, bila kita kreatif maka kita dapat menciptakan hal-hal lainnya dari kode-kode yang telah ada dan yang telah kita kuasai tanpa harus mencari kode-kode yang sulit yang dapat bikin pusing kepala hehehehe.... 

Hal lain yang dapat kita buat dengan onclick event yaitu menciptakan tab view. Dengan memakai onclick event maka tab view ini menjadi lebih sederhana dan lebih gampang dikuasai daripada memakai bahasa javascript. Hasilnya dapat Anda lihat pada animasi gif di bawah ini.

DEMO

Bagaimana tertarik untuk mencobanya?

Kodenya cukup sederhana menyerupai di bawah ini

Kode HTML

 <div id="Button1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">Button 1</div>
 <div id="Button2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">Button 2</div>
 <div id="Button3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">Button 3</div>
 <div id="Content1">
 <p>
 Enter some content here.
 </p>
 </div>
 <div id="Content2">
 <p>
 Enter some content here.
 </p>
 </div>
 <div id="Content3">
 <p>
 Enter some content here.
 </p>
 </div>

Perhatikan pada Button1, di situ kita tampilkan Content1 (display='block') dengan menyembunyikan Content2 dan Content3 (display='none'). Untuk Button2 kita menampilkan Content2 dengan menyembunyikan Content1 dan Content3. Begitu pun dengan Button3 kita menampilkan Content3 dengan menyembunyikan Content1 dan Content2.

Cukup sederhana bukan? Saya yakin Anda yang gres mempelajari kode-kode HTML juga akan lebih gampang untuk memahaminya.

Dan untuk mendapat tampilan menyerupai pada animasi gif di atas, silahkan gunakan instruksi CSS di bawah ini. Anda dapat memodifnya sesuai dengan selera Anda.

Kode CSS

 #Button1,#Button2{margin-top:-30px;padding:0;text-align:center;float:left;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
 #Button2{margin-left:34%}
 #Button3{margin-top:-30px;margin-right:-2px;padding:0;text-align:center;float:right;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
 #Content1{display:block;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
 #Content2,#Content3{display:none;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
 #Content1 p,#Content2 p,#Content3 p{margin:10px}

Tab view ini dapat disimpan di postingan atau dipakai di sidebar dan tab view ini sudah responsive.

Sumber https://www.kompiajaib.com/

Share this post