1

I have the following snippet:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Home</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Profile</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">Contact</div>
</div>

How can I save the current active tab if I refresh the page? And is it possible to access it through the URL like #contact-tab-pane ?

OMi Shah
  • 5,768
  • 3
  • 25
  • 34
executable
  • 3,365
  • 6
  • 24
  • 52
  • 1
    Does this answer your question? [Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink](https://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload-or-hyperlink) – OMi Shah May 17 '23 at 07:31
  • also, https://stackoverflow.com/questions/34491182/make-bootstrap-tab-active-on-the-bases-of-url-link – OMi Shah May 17 '23 at 07:31
  • also, https://stackoverflow.com/questions/69573435/twitter-bootstrap-5-tabs-go-to-specific-tab-on-page-reload-or-hyperlink – OMi Shah May 17 '23 at 07:31
  • kindly, search before posting !! – OMi Shah May 17 '23 at 07:31
  • The link you posted doesn't answer for bootstrap 5.2 – executable May 17 '23 at 07:41
  • *"The link"* - which link? There's 3 and the 3rd one is specifically for bootstrap 5 – freedomn-m May 17 '23 at 07:44
  • The 3rd one doesn't work properly, when a tab is selected on the url like `contact-tab` it will jump to it, but for the user it isn't friendly because he will see that `jump` – executable May 17 '23 at 07:49
  • may be you should use the search bar atleast, on searching you would have got this https://stackoverflow.com/a/51093553/5882307 – OMi Shah May 17 '23 at 07:58

1 Answers1

1

Here we need to read current url hash value with window.location.hash;

And then we need to create click event for [data-bs-toggle="tab"] to push the hash value to the current url using history.pushState(null, null, activeTabId);

Try JSfiddle

<script>
    $(document).ready(function ($) {
        var tabIdFromUrl = window.location.hash;
        if (tabIdFromUrl) {
            var activeTabBtn = $('[data-bs-target="' + tabIdFromUrl + '"]');
            if (activeTabBtn) {
                var tab = new bootstrap.Tab(activeTabBtn);
                tab.show();
            }
        }
        $(document).on('click', '[data-bs-toggle="tab"]', function (event) {
            var activeTabId = $(this).attr('data-bs-target');
            history.pushState(null, null, activeTabId);
        });
    });
</script>
Mahesh Thorat
  • 1
  • 4
  • 11
  • 22