jQueryを使用して、特定のリンクをクリックすると、ブートストラップのナビタブの特定のタブを開くには？

質問

私はjqueryとbootstrapの初心者なので、私の間違いを考慮してください。私はログインと登録のためにbootstrapモーダルを作成しました。同じモーダルウィンドウをポップアップする2つのボタンがありますが、モーダルウィンドウの中に別のタブを表示します。各タブには、いくつかの入力を持つフォームがあります。私の問題は、私が「ログイン」ボタンをクリックするとログインタブがモーダルに開かれ、私が私のページで「登録」ボタンをクリックすると登録タブが開かれ、モーダルがポップアップ表示されることです。

これらは、モーダルが開く2つのリンクです。

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

以下は、タブのコードとその内容です（ここでは不要なコードを避けています）。

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

私はこれが簡単にjquery.Butを通じて行うことができると思う私はそれを行うための正確な方法を知りません。 だから、誰かが私の問題を解決するために私を助けることができるしてください。

どのように解決するには？

.nav-tabsからセレクタを適用するとうまくいくようです。

HTML は

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

スクリプト は

$(document).ready(function(){
  activaTab('aaa');
});

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

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