web-dev-qa-db-ja.com

特定のタブをアクティブにしてBootstrapモーダルを開く方法

クリックされているリンクに応じて、bootstrapモーダル内のタブを開くようにしています。何を試しても、最初のタブでのみ開きます。2つのリンクは次のとおりです。以下：

<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をコードに残しました。

javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-modal
9
ConorJohn

モーダルを切り替える_.modal-toggle_要素にクラス_<a>_を追加しました。さらに、クリックするとトリガーされ、クリックされた要素のhrefを取得する関数をいくつか追加しました。その後、内の_<a>_要素でtab("show")を使用しています。 hrefと一致する_<li>_。 （モーダル内に閉じるボタンを追加したので、デモのテストが簡単になります）

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

デモフィドル

9
Ramiz Wachtler

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/

5
davidkonrad

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

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

タブアンカーにはdata-toggle = tabとhref = idの属性があることがわかっているので、リンクからのhrefを使用してタブのセレクターに渡すことができます。

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

デモ：http://jsfiddle.net/SeanWessell/2ct9zuu9/

4
Sean Wessell