Bootstrap change URL when switching tabs (WordPress)

Question

I am new to bootstrap and I am currently playing around with a tab/navigation system. This is what I have for the tabs and the tabs content so far:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
        <li class="nav"><a href="#B" data-toggle="tab">B</a></li>
        <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="A">Content inside tab A</div>
        <div class="tab-pane fade" id="B">Content inside tab B</div>
        <div class="tab-pane fade" id="C">Content inside tab C</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Questions

I want to link directly to one of the tabs. E.g. www.mysite.com/mypage#B or www.mysite.com/mypage/#B should directly open tab B.
When clicking on tabs the URL needs to change to corresponding #id to be able to get to the current tab when refreshing the page.

I got 1 to work by JS and to check for what is after # in the URL and then via php have an if statement on each nav to see if it should be active or not, and same for the tab-panes. However, that doesn't solve problem 2.

How can I solve this nicely? Or should I skip Bootstrap and just create my own navigation with some JS?

Does this answer your question? [Best way to make Twitter Bootstrap tabs persistent](https://stackoverflow.com/questions/9685968/best-way-to-make-twitter-bootstrap-tabs-persistent) — MrUpsidown, Jan 12 '23 at 13:10
Does this answer your question? [How can I keep selected Bootstrap tab on page refresh?](https://stackoverflow.com/questions/18999501/how-can-i-keep-selected-bootstrap-tab-on-page-refresh) — MrUpsidown, Jan 12 '23 at 13:12
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) — MrUpsidown, Jan 12 '23 at 13:13

score 0 · Answer 1 · answered Jan 12 '23 at 13:02

A few things first:

You tagged your question with both bootstrap-4 and bootstrap-5, but you're actually using bootstrap-3. My solution below works for Bootstrap 3, but requires changes for Bootstrap 5 that uses the data-bs-target attribute.
The version of jQuery (1.11) you're using is from 2014. I recommend using a more recent version (3.6.3).

To solve problem 1 and 2, add the following jQuery script:

var hash = window.location.hash;

$(".nav-tabs").find("li a").each(function(key, value) {
  if (hash === $(value).attr('href')) {
    $(value).tab('show');
  }

  $(value).click(function() {
    location.hash = $(this).attr('href');
  });
});

This will

Get the hash from the url;
Loop through each nav-tab li a element;
If the hash matches with the href attribute of one of the tabs: show it;
Attaches a click event handler on all tabs, changing the url hash using its href attribute when fired.

For other solutions, take a look at this SO question.

Bootstrap change URL when switching tabs (WordPress)

1 Answers1