Come aprire un modal Bootstrap con una scheda specifica attiva

Question

Sto provando ad aprire la scheda all'interno del bootstrap modal a seconda del collegamento su cui si fa clic. Non importa cosa ho provato, si aprirà solo sulla prima scheda. I due collegamenti sono i seguenti:

<a href="#tab-mileage" data-toggle="modal" data-target="#buyers-report-modal" >Mileage</a> 
<a href="#tab-wrong-vehicle" data-toggle="modal" data-target="#buyers-report-modal">Wrong vehicle?</a> 

e il markup per il modale è qui:

<div class="modal" id="buyers-report-modal" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-dialog modal-lg modal-offset-top"> 
    <div class="modal-content"> 
    <div class="modal-body"> 
    <div class="sd-tabs sd-tab-interaction"> 
     <div class="row"> 
     <ul class="nav nav-tabs col-md-3 custom-bullet"> 

      <li class="active"><a data-toggle="tab" href="#tab-wrong-vehicle"> Wrong Vehicle?</a></li> 
      <li><a data-toggle="tab" href="#tab-mileage"> Mileage</a></li> 

     </ul> 
     <div class="tab-content col-md-9"> 
      <form id="tab-wrong-vehicle" class="tab-pane active" action="" method="post"> <!-- Wrong Vehicle? --> 

      <h3 class="tab-title">Tab 1</h3> 

      </form> <!-- Wrong Vehicle? --> 



      <form id="tab-mileage" class="tab-pane"> <!-- Mileage --> 

      <h2 class="tab-title-resp hidden-md hidden-lg"> Mileage</h2> 
      <h3 class="tab-title">Tab 2</h3> 

      </form> <!-- Mileage --> 

     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Ho bisogno modale di aprire il link che viene cliccato, per esempio, se io fossi per cliccare sul secondo link si apriva la seconda scheda nel modal. Qualsiasi aiuto sarebbe molto apprezzato, non sono stato in grado di trovare una soluzione a questo ovunque.

Ho lasciato l'ID originale nel codice in caso ho fatto un errore nel sostituirli.

Answer 1

ho aggiunto una classe .modal-toggle a gli elementi <a> che alternano le modali. Inoltre, ho aggiunto qualche funzione aggiuntiva che si innesca al clic e ottieni il href dell'elemento selezionato, dopo di che sto usando tab("show") sull'elemento <a> all'interno dello <li> che corrisponde allo href. (Ho aggiunto un pulsante di chiusura all'interno del vostro modale, così è più facile per testare la demo)

$('.modal-toggle').click(function(e){ 
    var tab = e.target.hash; 
    $('li > a[href="' + tab + '"]').tab("show"); 
}); 

Demo Fiddle

Answer 2

È necessario selezionare come destinazione l'ancoraggio della scheda ed eseguire la funzione $.tab('show').

http://getbootstrap.com/javascript/#tabs

Dal momento che si conosce la scheda di ancoraggio ha attributi di dati-ginocchiera = scheda e il href = id possiamo usare a href dal collegamento di passare al selettore per la scheda.

$('a[data-toggle=modal][data-target]').click(function() { 
    var target = $(this).attr('href'); 
    $('a[data-toggle=tab][href=' + target + ']').tab('show'); 
}) 

DEMO: http://jsfiddle.net/SeanWessell/2ct9zuu9/

Answer 3

prendere vantaggio della manifestazione shown.bs.modal. L'evento contiene informazioni circa la href del cliccato <a>, e quindi è possibile modificare la scheda in base a tale:

$("#buyers-report-modal").on('shown.bs.modal', function(e) { 
    var tab = e.relatedTarget.hash; 
    $('.nav-tabs a[href="'+tab+'"]').tab('show') 
}) 

codice vostro lavoro ->http://jsfiddle.net/pvo1sny8/