ブートストラップモーダルが呼び出されたときに正しいタブを表示

Question

私は私のホームページに3つのボタンと3つのタブを持つモーダルを持っています。私は、それぞれのボタンがクリックされたときに正しいタブを起動したい。それについてどうすればいいですか？

例：キャリアボタンをクリックすると、「キャリア」タブが表示されます。同様に、連絡先&も同様です。

<div class="row"> 
<div class="col-xs-4"><a data-toggle="modal" data-target="#myModal"><span class="btn btn-primary">Contact</span></a></div> 
<div class="col-xs-4"><a data-toggle="modal" data-target="#myModal"><span class="btn btn-primary">Careers</span></a></div> 
<div class="col-xs-4"><a data-toggle="modal" data-target="#myModal"><span class="btn btn-primary">Partners</span></a></div> 
</div> 

<!-- modal--> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <a href="" class="pull-right" data-dismiss="modal">CLOSE</a> 
     <ul class="nav nav-tabs"> 
      <li class="active"><a data-toggle="tab" href="#contact">Contact</a></li> 
      <li><a data-toggle="tab" href="#careers">Careers</a></li> 
      <li><a data-toggle="tab" href="#partners">Partners</a></li> 
     </ul> 
     </div> 
     <div class="modal-body"> 

     <div class="tab-content"> 
      <div id="contact" class="tab-pane fade in active"> 
       <h3>Contact Form</h3> 
      </div> 
      <div id="careers" class="tab-pane fade"> 
       <h3>Careers Form</h3> 
      </div> 
      <div id="partners" class="tab-pane fade"> 
       <h3>Partners Form</h3> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

DEMO

Answer 1

ちょうどあなたのボタンのそれぞれに正しいタブ名とdata-target-tab="#contact"を追加します。 show.bs.modal（bootstrap modal events）には、正しいタブ（bootstrap tab methods）を開きます。ここで

$('#myModal').on('show.bs.modal', function (event) { 
    var button = $(event.relatedTarget) 
    $("a[href='"+button.data('target-tab')+"']").tab('show'); 
}) 

はとても素晴らしい作業fiddle