cherrun cherrun - 1 year ago 135
Javascript Question

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

I'm using Bootstrap's

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>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<input type="text" value="fooBar" class="input-xlarge">
<div class="tab-pane fade" id="profile">
<form id="tab2">
<a href="#home">Home</a>

As you can see, I have a link in my
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?:

// 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 =;

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?:


This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the
tab, when clicked on the anchor.

Thus, how would I jump to a given
from another tab?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download