Maksud dari cara membuat tampilan deskripsi tab dengan Javascript adalah dimana kita mengklik suatu tab maka sesuatu akan muncul, hampir sama seperti kemarin ya tentang cara kita membuat acordion, jika acordion kita memilih satu deskripsi yang lain masih kebuka, tetapi disini berbeda jika kita memlih satu tab, maka tab dengan deskripsi lain tidak akan kebuka seperti itu, dan disini saya akan memberitau bagaimana cara menggunakan javascript, jadi jangan kemana-mana simak terus ya.
Oke untuk kasus cara membuat tampilan deskripsi tab ini saya akan membuatnya halnya seperti tampilan menu dimana ketika kita klik menu home maka yang tampil halaman home seperti itu, oke langsung saja ya, silahkan teman-teman buat file index.html dan silahkan copy kode ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ width: 800px; margin: auto; margin-top: 20px; } menu{ background: #3B3B98; flex: 100%; } menu ul{ display: flex; list-style: none; } menu li{ flex: 20%; text-align: center; } menu a{ color: #fff; line-height: 50px; text-decoration: none; display: block; } menu a:hover, .active{ background: #1B9CFC; } .deskripsi{ display: none; border: 1px solid #182C61; text-align: center; padding: 100px; background: #f1f2f6 } </style> </head> <body> <div class="container"> <menu class="tab"> <ul> <li><a href="" onclick="showTab(event, 'home')" class="menus">Home</a></li> <li><a href="" onclick="showTab(event, 'profile')" class="menus">Profile</a></li> <li><a href="" onclick="showTab(event, 'product')" class="menus">Product</a></li> <li><a href="" onclick="showTab(event, 'contact')" class="menus">Contact</a></li> </ul> </menu> <div id="home" class="deskripsi"> <h3>Home</h3> <p>Ini halaman Home</p> </div> <div id="profile" class="deskripsi"> <h3>Profile</h3> <p>Ini halaman Profile</p> </div> <div id="product" class="deskripsi"> <h3>Product</h3> <p>Ini halaman Product</p> </div> <div id="contact" class="deskripsi"> <h3>Contact</h3> <p>Ini halaman Contact</p> </div> </div> <script type="text/javascript"> function showTab(eve, namaTab){ eve.preventDefault() var deskripsi = document.querySelectorAll(".deskripsi"); for(var i = 0; i<deskripsi.length; i++){ deskripsi[i].style.display = "none" } var menus = document.querySelectorAll(".menus") for(var i = 0; i<menus.length; i++){ menus[i].className = menus[i].className.replace(" active", "") } document.getElementById(namaTab).style.display = "block" eve.currentTarget.className += " active" } </script> </body> </html> |
Bisa dilihat disetiap menu saya membuat sebuah event onclick, dimana event onclick itu akan menuju ke function yang akan memproses seperti yang teman-teman lihat diatas. jika kita lihat ketika kita klik tab yang membawa sebuah parameter deskripsinya akan di cocokan pada id deskripsinya, dan disini kita set sama, jadi id deskripsi mana yang akan di tampikan.
disini saya juga membuat sebuah class active dimana class active it berfungsi untuk menandai kita sekarang lagi membuka tab yang mana, supaya deskripsinya tampil juga, oke bagaimana hasilnya, hasilnya akan tampil seperti ini:
silahkan teman-teman pilih tab yang lain, oke saya rasa cukup sampai sini belajar kita tentang cara membuat tampilan deskripsi tab dengan Javascript semoga bermanfaat dan sampai jumpa