12

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?

Community
  • 1
  • 1
cherrun
  • 2,102
  • 8
  • 34
  • 51

2 Answers2

40

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.

Marijn
  • 10,367
  • 5
  • 59
  • 80
0

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');
Harm
  • 787
  • 7
  • 11