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

Question

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

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.

Answer 2

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');