Membuat Tab View Dengan Onclick Event

Membuat Tab View Dengan Onclick Event

Bola Hero Gawai

Membuat Tab View Dengan Onclick Event

Beberapa hari yang lalu saya sudah memposting cara membuat show hide div sederhana di postingan. Kenapa dibilang sederhana? Karena di situ kita hanya membuat show hide div dengan menggunakan onclick event. Dengan onclick event maka kita membuat perintah yang lebih sederhana daripada kita membuat perintahnya dengan javascript.


Nah pada postingan kali ini adalah sebenarnya pengembangan dari onclick event dari postingan sebelumnya. Seperti yang telah saya katakan, jika kita kreatif maka kita bisa membuat hal-hal lainnya dari kode-kode yang telah ada dan yang telah kita kuasai tanpa harus mencari kode-kode yang sulit yang bisa bikin pusing kepala hehehehe.... 

Hal lain yang bisa kita buat dengan onclick event adalah membuat tab view. Dengan menggunakan onclick event maka tab view ini menjadi lebih sederhana dan lebih mudah dikuasai daripada menggunakan bahasa javascript. Hasilnya bisa Anda lihat pada animasi gif di bawah ini.

Membuat Tab View Dengan Onclick Event


Bagaimana tertarik untuk mencobanya?

Kodenya cukup sederhana seperti 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 baru mempelajari kode-kode HTML juga akan lebih mudah untuk memahaminya.

Dan untuk mendapatkan tampilan seperti pada animasi gif di atas, silahkan gunakan kode CSS di bawah ini. Anda bisa 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 bisa disimpan di postingan atau digunakan di sidebar dan tab view ini sudah responsive.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

47 Comments Add Comment

Pertamax Gan :D Wah sederhana tapi bermanfaat Nih .. Tab View ini di pasang Di Sidebar Bisa juga ya Kang ?

Balas

Betul mas bisa disimpan di postingan atau bisa juga disimpan di sidebar :)

Balas

Siip Lah .. Entar saya racik dulu ramuannya .. Hehehe :D

Balas

ini versi simplenya, loadingnya jadi lebih ringan kalau pake sistem onclick :-d

Balas

Betul kang karena tidak perlu memanggil jquery :)

Balas

Mas Adhy sy ga ngerti nih perlu banyak belajar dulu nih sama Mas kalau yg beginian..gkgkkkk

Balas

ini yang sedari dulu didambakan, sejak ganti template tabview udah ngga dipasang lagi, padahal sejak ng'blog pasang selalu tanpa heda, walaupun emang rada bikin berat, cuman....yakinlah kalau tabview dari sinih mah bakalan seringan dompet yang lagi kosong deh nih... =)D

Balas

Keren Kang (Y) saya coba dulu kang ... :)

Balas

makasih gan, coba dlu..

Balas

Hehhehehe betul sis harus belajar biar tambah-tambah ilmu :)

Balas

Heheheh dompet lepet atuh kang :)

Balas

Silahkan ms :)

Balas

Silahkan dicoba mas Andika :)

Balas

Iya dengan onclick menjadi simple mas :)

Balas

kepikir juga buat tutorial seperti ini ya mas, keren :-bd

Balas

tutorialnya bagus banget.. boleh dicoba :)

Balas

Iya sis setelah melihat kode tab view dengan javascript yang cukup pusing melihatnya :)

Balas

Makasih kang ... silahkan dicoba :)

Balas

benar mas, apalgi menggunakan js pasti berpengaruh terhadap loading hehehe..

Balas

Sudah di praktekan kang di blog aqiqohnet.blogspot.com, di tambah efeck bounce makin mentul-metul, dan loading blog tetap ngacir... :bd

Balas

Sip mas :) untuk komennya ya mas :)

Balas

Betul sekali Kang, :-bd selain komen, navigasi sidebar juga memakai ilmunya Akang, dan bahkan seluruh tampilan blog,... ;)
Plus bumbu sedap dari resep dapur Mbak Leony Li :)

Balas

Keren memang akang mah hhe..
Btw galau design nih kayaknya hihi

Balas

Kereeen, tp saya ga ngerti pasangnya

Balas

berkunjung :) gak jauh berbeda sama posting yg pertama ya Kang ??

Balas

keren bin mantab mas.. thanks ya tutornya :)

Balas

keren tutorialnya, ijin coba mas :)

Balas

kak tolong bantuin aq dong cara buat iklan di tengah home blog atau kira2 seperti ini gambar link nya :
http://4.bp.blogspot.com/-HdeCaxco3h4/U4MY147sOtI/AAAAAAAAAO0/lf3fiykSYHQ/s1600/hhhh.jpg

Balas

komen di dieu mah eweh photoan euy! kurang narsis jadinya nih...buqikhixixixi...

Balas

Cocok nih buat di sidebar :D

Balas

Menarik, udah jarang sekali tapi blogger menggunakan cara ini.. itu sih menurut saya =)D

Balas

simpen dulu kodenya, nanti tinggal diterapkan di blog masing-masing :)

Balas

Hehhehehe ah tiasa wae kang Ruly mah :)

Balas

mas share meta data fb untuk blog donk...agar postingan yang muncul di fb sesuai dengan blog...terima kasih..:)

Balas

Hehehee jika mau belajar pasti bisa :)

Balas

Betul mas ini hanya pengembangan saja :)

Balas

Sama-sama mas... makasih :)

Balas

Silahkan dicoba mas :)

Balas

Itu biasanya template-template magazine dari mas Sugeng seperti itu, coba saja download templatenya :) Tutorialnya akan sedikit sulit karena lebar dan elemen tiap-tiap blog berbeda-beda, jadi jika pun ada tutorialnya, untuk memasangnya harus memiliki kreatifitas karena akan sulit jika terlalu baku mengikuti tutorialnya.

Balas

Hehehehe ah teu narsis ge pan kang Beben mah tos kasep :)

Balas

Iya kang silahkan dicoba :)

Balas

Betul mas saya lihat juga udah jarang yang pakai tab view :)

Balas

Hehhehehe silahkan kang Ucup

Balas

Di template Drooidplus kang Ismet kalau ga salah ada meta fb-nya mas, coba saja download templatenya. :)

Balas

Mas Adhy Saya Ingin Menjadikan Tab Viewnya ada 5 Buah tolong bikinin CSSnya dong saya masih bingung nih , makasih ya :D Semoga sukses nih

Balas

gan di update yah, kalau bisa yang tab nya ada di sebelah kanan atau di bawah.. mksih :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×