如何在使用 jQuery 单击特定链接时打开 bootstrap 导航选项卡的特定选项卡

我对jQuery和Bootstrap很新，所以请考虑我的错误.我已经为登录和注册创建了一个 bootstrap 模式.它包含两个导航选项卡，称为登录和注册.我有两个按钮，弹出相同的模式窗口，但在模式窗口内显示不同的选项卡.每个选项卡中都有一个包含多个输入的表单.我的问题是，当我点击"登录"按钮时，登录选项卡在模式中打开，而当我点击页面上的"注册"按钮时，注册选项卡打开.

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>

下面是我的选项卡代码及其内容(我在这里避免不必要的代码):

 <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轻松完成.但我不知道该怎么做.