Develop Reference

Bootstrap change URL when switching tabs (WordPress)

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</li>
<li class="nav">B</li>
<li class="nav">C</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?

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.

Jump to specific tab from another tab with Bootstrap's nav-tabs

I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?

You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.

The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');

Twitter bootstrap navbar tab "hide" event?

I'm using a twitter-bootstrap nav bar combined with tabs to load in forms via ajax (I'm using Django to serve the forms)
<ul class="nav nav-pills" id="tabs">
<li>Form1</li>
<li>Form2</li>
<li>Form3</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
<div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
<div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>
This couples with the jquery:
$('#tabs').bind('show', function(element) {
paneID = $(element.target).attr('href');
src = $(paneID).attr('data-src');
$(paneID).load(src);
});
Firstly, part of me wonders whether this might be a bad idea. I can't think of a reason why but if someone could point out to me whether this method has any drawbacks I would appreciate it.
Secondly, When I navigate away from a tab, I'd like to trigger the "onunload" event for that tabs content. But I can't seem to find a way to "unload" the data from a tab when it is navigated away from.
$('#tabs').bind('hide', function(element) {
doStuff();
});
is not valid apparently. Any help/guidance appreciated.

Bootstrap tab fires an event when the tab is shown.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Taken from bootstrap:
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
You can use the relatedTarget. That is the tab that just "unloaded".

Switching "tabs" with javascript

I want to create something like tabs.
So I have tab itself as
<div class="tab" >Tab1</div>
<div class="tab" >Tab2</div>
<div class="tab" >Tab3</div>
and page content for each tab as
<div class="pagecontent" >pagecontent for Tab1</div>
<div class="pagecontent" >pagecontent for Tab2</div>
<div class="pagecontent" >pagecontent for Tab3</div>
How to make js function in "clever way" so by pressing "tab1", "pagecontent for Tab1" shows and other 2 get hidden? Also, number of tabs varies from page to page.

$(function() {
$('.pagecontent').not(':eq(0)').hide();
$('.tab').click(function() {
$('.pagecontent').hide();
$('.pagecontent').eq($(this).index()).show();
});
});
Please see a working demo here > http://jsfiddle.net/Yce32/

Try jQuery UI Tabs:
http://jqueryui.com/tabs/
It's "clever way" - you will have add\delete\order tabs in a box

Twitter Bootstrap tab shown event not firing on page load

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?

Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle

You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");

I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs

After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();