How to open specific tab of bootstrap nav tabs on click of a particuler link using jQuery?

Question

I am new to jquery and bootstrap,so please consider my mistakes.I have created a bootstrap modal for login and registration. It contains two nav-tabs called as login and registration.I have two buttons that popup the same Modal window, but display a different tab inside the Modal window. In each tab is a form with a number of inputs. My issue is getting the modal popped up with login tab opened in the modal when i click on the 'login' button and registration tab opened when i click on the 'register' button on my page.

These are 2 links on which the modal opens:

<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font> </big></a></div>  <div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;"> <a data-toggle="modal" href="#regestration" class="header-register-a" > <big> <font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font> </big></a> 

Here is my code of tabs and their contents(i am avoiding unnecessary code here):

 <div class="tabbable" >       <ul class="nav nav-tabs" ><!--tabs-->         <li class="active" style="position:absolute;margin-left:0px;" id="logintab">         <a href="#pane_login" data-toggle="tab">Login</a></li>         <li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li>        </ul>       <div class="tab-content"><!--login tab content-->          <div id="pane_login" class="tab-pane active">              <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">                </form>          </div><!--/pane_login-->          <div id="pane_reg" class="tab-pane"><!--registration tab content-->            <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">              </form>          </div>         </div><!-- /.tab-content --> </div><!-- /.tabbable --> 

I think this can be done through jquery easily.But i dont know exactly how to do it. So,please can anyone help me to solve my problem.Thank you in advance ?

Answer 1

Applying a selector from the .nav-tabs seems to be working

HTML is

<ul class="nav nav-tabs">     <li><a href="#aaa" data-toggle="tab">AAA</a></li>     <li><a href="#bbb" data-toggle="tab">BBB</a></li>     <li><a href="#ccc" data-toggle="tab">CCC</a></li> </ul> <div class="tab-content" id="tabs">     <div class="tab-pane" id="aaa">...Content...</div>     <div class="tab-pane" id="bbb">...Content...</div>     <div class="tab-pane" id="ccc">...Content...</div> </div> 

Script is

$(document).ready(function(){   activaTab('aaa'); });  function activaTab(tab){   $('.nav-tabs a[href="#' + tab + '"]').tab('show'); }; 

http://jsfiddle.net/pThn6/80/