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

Question

I'm using Bootstrap's nav-tabs with the following setup:

<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></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">
        <a href="#home">Home</a>
    </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?

Answer 1

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">
    <a href="#" id="gotohome">Jump to home tab (this works)</a>
...

and add the following in your document ready:

$('#gotohome').click(function() {
  $('#myTab a[href="#home"]').tab('show');
});

Working example at jsFiddle.