loading...

Cara Menciptakan Tab View Memakai Onclick Event

Loading...
 Di dalam dunia Bloging yang sudah usang saya tekuni meskipun mencar ilmu secara belajar sendiri tanya Cara Membuat Tab View Menggunakan Onclick Event

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

Didalam dunia koding untuk menciptakan suatu tampilan dalam templated blog saya akui praktis gampang susah, kuncinya ada di kemauan dan sedikit kreativitas dari kita untuk mau mempelajari dan mnegembangkan source instruksi yang akan di buat, menyerupai 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 sajian tab dalam div dan seterusnya, berdasarkan saya memakai Onclick Event sangat sederhana tidak menyerupai memakai Javascript yang kodenya terlalu banyak, lain halnya kalau memakai Onclick Event, instruksi yang dibentuk cukup sederhana dan simple.

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


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

Penerapan kodenya cukup sederhana menyerupai 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 memakai instruksi HTML niscaya sudah sangat paham hal diatas.

Lanjut anggap tadi sudah terpasang kemudian bagaimana biar tab view diatas sanggup muncul tepat menyerupai tampilan Gambar animasi diatas, untuk itu dibutuhkan pemanis instruksi 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 sanggup pasang di sidebar atau di dalam postingan pun juga bisa. Selesai selamat mencoba dan semoga bermanfaat.

Sumber http://www.dibalikseo.com
Loading...

Subscribe to receive free email updates:

0 Response to "Cara Menciptakan Tab View Memakai Onclick Event"

Posting Komentar