Cara Membuat Tab View Menggunakan Onclick Event

Di dalam dunia Bloging yang sudah lama saya tekuni meskipun belajar secara otodidak tanya sana sini baik secara langsung maupun melalui Grup tertentu hasilnya luar biasa ternyata dalam dunia Bloging tidak lepas dari yang namanya Coding-coding seperti yang selama ini di share dalam postingan Blog ini. Ada kepuasan tersendiri jika bisa berbagi pengetahuan ke sesama Blogger yang saya dapat dari berbagai 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 kode yang akan di buat, seperti 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 seperti menggunakan Javascript yang kodenya terlalu banyak, lain halnya jika menggunakan Onclick Event, kode yang dibuat cukup sederhana dan simple.

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

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

Penerapan kodenya cukup sederhana seperti 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 kode HTML pasti sudah sangat paham hal diatas.

Lanjut anggap tadi sudah terpasang lalu bagaimana agar tab view diatas dapat muncul sempurna seperti tampilan Gambar animasi diatas, untuk itu diperlukan tambahan kode 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 sobat bisa pasang di sidebar atau di dalam postingan pun juga bisa. Selesai selamat mencoba dan semoga bermanfaat.