Melanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara handle tabs dari menu html dengan jquery part2. Jika pada sesi sebelumnya sudah saya jelaskan apa itu tabs dan selain itu teman-teman juga sudah membuat file tabs.js, dimana dari file tabs.js tersebut didalamnya sudah terdapat fungsi setCookie, yang dimana fungsi tersebut adalah untuk membuat ataumendaftarkan cookie yang nantinya bisa kalian manfaatkan untuk mengetahui menu yang sedang ditekan begitupun sebaliknya dari fungsi getCookie adalah untuk menarik atau mengambil dari hasil cookie yang sebelumnya sudah didaftarkan. Cookie tersebut sama fungsinya dengan session. Langsung saja untuk tahapan selanjutnya kalian bisa ikuti saya.
Berikut Tahapannya :
- Buat satu buah file html dengan nama index.html yang lokasinya sejajar dengan file tabs.js yang sebelumnya sudah dibuat
- Jika sudah selanjutnya ketikan kode seperti berikut :
|
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 |
<!DOCTYPE html> <html> <head> <title>Cara Handle Tabs Dari Menu HTML Dengan jQuery</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <style> a{color: #111 !important;} </style> <body> <nav class="navbar navbar-inverse text-white"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Logo Site</a> </div> <ul class="nav navbar-nav"> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Kategori<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="index.html" data-id="#html" class="menu">HTML</a></li> <li><a href="index.html" data-id="#css" class="menu">CSS</a></li> <li><a href="index.html" data-id="#javascript" class="menu">JavaScript</a></li> </ul> </li> </ul> </div> </nav> <div class="container"> <div class="col-md-12" style="margin-top: 20px;"> <div class="panel with-nav-tabs panel-primary text-white"> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#html" data-toggle="tab">HTML</a></li> <li><a href="#css" data-toggle="tab">CSS</a></li> <li><a href="#javascript" data-toggle="tab">JavaScript</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content clearfix"> <div class="tab-pane active" id="html"> <div class="service-details">HTML</div> </div> <div class="tab-pane" id="css"> <div class="service-details">CSS</div> </div> <div class="tab-pane" id="javascript"> <div class="service-details">JavaScript</div> </div> </div> </div> </div> </div> </div> </body> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> <script src="tabs.js" type="text/javascript"></script> <script> $(document).ready(function(){ $('a[href="'+getCookie('test')+'"]').tab('show'); }); </script> </html> |
- Jika sudah selanjutnya simpan kedua file tersebut, file tabs.js dan file index.html
- Dan lihat hasilnya dibrowser kesayangan kalian.
Sampai disini penjelasan saya mengenai cara handle tabs dari menu html dengan jquery part2, semoga bermanfaat.