Cara Membuat Tab View Menggunakan Onclick Event

Di dalam dunia Bloging yang sudah lama saya tekuni meskipun mencar ilmu secara otodidak tanya sana sini baik secara pribadi maupun melalui Grup tertentu kesannya luar biasa ternyata dalam dunia Bloging tidak lepas dari yang namanya Coding-coding ibarat yang selama ini di share dalam postingan Blog ini. Ada kepuasan tersendiri kalau mampu membuatkan pengetahuan ke sesama Blogger yang saya dapat dari banyak sekali sumber.

Didalam dunia koding untuk membuat suatu tampilan dalam templated blog saya akui gampang gampang susah, kuncinya ada di kemauan dan sedikit kreativitas dari kita untuk mau mempelajari dan mnegembangkan source arahan yang akan di buat, ibarat dalam postingan kali ini akan membahas Cara Membuat Tab View Menggunakan Onclick Event.

Seperti yang sudah kita ketahui penggunaan Onclick Event sangat disarankan terutama dalam penggunaan pembuatan menu tab dalam div dan seterusnya, menurut saya menggunakan Onclick Event sangat sederhana tidak ibarat menggunakan Javascript yang kodenya terlalu banyak, lain halnya kalau menggunakan Onclick Event, arahan yang dibuat cukup sederhana dan simple.

Seperti rujukan penampakan gambar animasi dibawah ini yaitu penggunaan Onclick Event pada pembuatan tab view lebih sederhana dibandingkan menggunakan perintah dari Javascript.

Tampilan diatas yaitu tab view yang biasa di gunakan dalam setiap tampilan Home di blog atau website, tab view tersebut dibuat dengan Kode Onclick Event, nah bagi sahabat yang mau mencoba membuatnya mari kita simak berikut ini.

Penerapan kodenya cukup sederhana ibarat berikut dibawah ini.


Pertama, Penerapan 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 content here. </p> </div> <div id="Content2"> <p> Enter content here. </p> </div> <div id="Content3"> <p> Enter Content here. </p> </div>

Keterangan :

• Button 1 untuk nantinya menampilkan Content 1 (display='block') dengan cara disembunyikannya Content 2 kemudian Content 3 (display='none').
• Button 2 untuk nantinya menampilkan Content 2 dengan cara disembunyikannya Content 1 kemudian Content 3.
• Button 3 untuk nantinya menampilkan Content 3 dengan cara disembunyikannya Content 1 kemudian Content 2.

Cukup sederhana kan sobat, perlahan saja dipelajarinya, bagi yang sudah sering menggunakan arahan HTML pasti sudah sangat paham hal diatas.

Lanjut anggap tadi sudah terpasang lalu bagaimana biar tab view diatas dapat muncul tepat ibarat tampilan Gambar animasi diatas, untuk itu dibutuhkan suplemen arahan CSS berikut ini.


Ke Dua, Penerapan 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}

Perhatikan penerapan kodenya, penggunaan Tab View ini sudah Responsive jadi otomatis akan menyesuaikan medianya, dan untuk penggunaan tab view ini sahabat mampu pasang di sidebar atau di dalam postingan pun juga bisa. Selesai selamat mencoba dan semoga bermanfaat.