Bootstrap Tab Remember Selected when Refreshed by Ngekoding

// ------------------------
// selected-tab-refresh.js
// ------------------------

$(document).ready(function() {
    $('ul.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    if (!hash) hash = $('ul.nav-tabs > li > a').attr('href');
    $('ul.nav-tabs a[href="' + hash + '"]').tab('show');

});

// ------------------------
// How to use?
// ------------------------

// Add libraries (jquery and bootstrap) and our selected-tab-refresh.js
// You can put this code before </body> tag or wherever you want

<script src="path/to/jquery.min.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/selected-tab-refresh.js"></script>

// And then in your html
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link" id="tab-1" data-toggle="pill" href="#tab-1">Pending</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="tab-2" data-toggle="pill" href="#tab-2">Telah Dibayar</a>
  </li>
</ul>

<div class="tab-content" id="tabs-tabContent">
  <div class="tab-pane fade" id="tab-1" role="tabpanel">YOUR TAB CONTENT HERE</div>
  <div class="tab-pane fade" id="tab-2" role="tabpanel">YOUR TAB CONTENT HERE</div>
</div>