Zeigen Sie die korrekten Registerkarten, wenn Bootstrap Modal

Question

aufgerufen wird Ich habe drei Schaltflächen in meiner Homepage und ein Modal mit drei Registerkarten. Ich möchte die richtige Registerkarte starten, wenn die entsprechenden Schaltflächen geklickt werden. Wie soll ich vorgehen?

Beispiel: Ich möchte die Registerkarte "Karriere" anzeigen, wenn auf die Schaltfläche Karriere geklickt wird. Gleiches gilt auch für Kontakt & Partner.

<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

Fügen Sie einfach data-target-tab="#contact" mit der richtigen Registerkarte Namen auf jedem von Ihnen Tasten. Und unter show.bs.modal (bootstrap modal events), öffnen Sie die richtige Registerkarte (bootstrap tab methods).

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

Hier ist ein funktionierendes fiddle