SHARE
TWEET

Bootstrap Tab Remember Selected when Refreshed by Ngekoding

ngekoding May 25th, 2020 (edited) 936 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // ------------------------
  2. // selected-tab-refresh.js
  3. // ------------------------
  4.  
  5. $(document).ready(function() {
  6.     $('ul.nav-tabs a').click(function (e) {
  7.         e.preventDefault();
  8.         $(this).tab('show');
  9.     });
  10.  
  11.     // store the currently selected tab in the hash value
  12.     $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
  13.         var id = $(e.target).attr("href").substr(1);
  14.         window.location.hash = id;
  15.     });
  16.  
  17.     // on load of the page: switch to the currently selected tab
  18.     var hash = window.location.hash;
  19.     if (!hash) hash = $('ul.nav-tabs > li > a').attr('href');
  20.     $('ul.nav-tabs a[href="' + hash + '"]').tab('show');
  21.  
  22. });
  23.  
  24. // ------------------------
  25. // How to use?
  26. // ------------------------
  27.  
  28. // Add libraries (jquery and bootstrap) and our selected-tab-refresh.js
  29. // You can put this code before </body> tag or wherever you want
  30.  
  31. <script src="path/to/jquery.min.js"></script>
  32. <script src="path/to/bootstrap.min.js"></script>
  33. <script src="path/to/selected-tab-refresh.js"></script>
  34.  
  35. // And then in your html
  36. <ul class="nav nav-tabs" role="tablist">
  37.   <li class="nav-item">
  38.     <a class="nav-link" id="tab-1" data-toggle="pill" href="#tab-1">Pending</a>
  39.   </li>
  40.   <li class="nav-item">
  41.     <a class="nav-link" id="tab-2" data-toggle="pill" href="#tab-2">Telah Dibayar</a>
  42.   </li>
  43. </ul>
  44.  
  45. <div class="tab-content" id="tabs-tabContent">
  46.   <div class="tab-pane fade" id="tab-1" role="tabpanel">YOUR TAB CONTENT HERE</div>
  47.   <div class="tab-pane fade" id="tab-2" role="tabpanel">YOUR TAB CONTENT HERE</div>
  48. </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top