特定のタブをアクティブにしてブートストラップ・モーダルを開く方法

Question

クリックするリンクに応じて、ブートストラップ・モーダル内のタブをオープンしようとしています。私が何を試しても、それは最初のタブでのみ開きます。二つのリンクは次のとおりです：

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

とモーダルのためのマークアップはここにある：

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

私がいた場合、私は、例えば、モーダルがクリックされたリンクを開く必要が2番目のリンクをクリックすると、モーダルの2番目のタブが開きます。どんな助けでも大いに感謝されます、私はどこでもこのソリューションを見つけることができませんでした。

私は元のIDをコードに残しましたが、置き換えに間違いがありました。

Answer 1

を私はクラス.modal-toggleを追加しましたモーダルを切り替える要素は<a>です。さらに、クリックしてトリガーするいくつかの追加機能を追加しました。hrefに一致する<li>内の要素のを使用しています。の<a>要素が使用されています。 （私はあなたのモーダル内部の閉じるボタンを追加しましたので、それはデモをテストする方が簡単です）

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

Demo Fiddle

Answer 2

タブのアンカーをターゲットにして$.tab('show')関数を実行する必要があります。

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

あなたはタブアンカーはタブのセレクタに渡すデータトグル=タブとHREF =私たちは、リンクからのhrefを使用することができ、IDの属性を持って知っているので。

$('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

shown.bs.modalイベントの利点を取ります。イベントは、クリックされた<a>のhrefに関する情報を保持し、その後、あなたはそれに応じてタブを変更することができます。

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

あなたのコードの作業 - >http://jsfiddle.net/pvo1sny8/