モーダル内の特定のタブを開く方法

Question

2つのボタンがあり、それぞれがモーダルを開く責任がありますが、このモーダルにはサインアップとサインインの2つのタブがあります。ユーザーがサインアップボタンをクリックした後モーダルは、サインアップ]タブをアクティブにする必要があります開き、ユーザーがモーダル後、ボタンで記号をクリックするとタブの記号がアクティブでなければなりません開き

ボタンのコードは

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">SIGN UP</button> 
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-lg_two">SIGN IN</button> 

のコードですモーダルは

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <ul class="nav nav-tabs" > 
        <li class="nav-item col "> 
         <a class="nav-link active" href="#signup" data-toggle="tab" >Sign up</a> 
        </li> 
        <li class="nav-item col "> 
         <a class="nav-link" href="#signin" data-toggle="tab" >Sign in</a> 
        </li> 
       </ul> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span> 
       </button> 
      </div> 
      <div class="modal-body"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col"> 
          <div class="tab-content"> 
           <div class="tab-pane active" id="signup"> 
            signup box 
           </div> 
           <div class="tab-pane" id="signin"> 
            signin box     
           </div> 
          </div> 
         </div> 
         <div class="col" id="social" > 
          Content 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

誰でもこの方法を教えてください。

Answer 1

Javascriptで行う必要があります。ここには1つの方法があります。 Working JSFiddle。

最初にを削除するには、両方のボタンでdata-toggle="modal" data-target=".bd-example-modal-lg"を削除します。モーダルを開くときにタブターゲットのJavaScriptを実行する必要があります。dataの属性ではなく、the modal show methodを使用してモーダルを手動で開いた場合は、簡単に実行できます。

<button type="button" class="btn btn-primary" data-tab="signup">SIGN UP</button> 

最終、いくつかを追加します。あなたのタブのidで、例えばdata属性について -

次は、その場所で、それが対象とされ、タブ識別するために、各ボタンに何かを追加します

// Add an event handler to fire when our buttons are clicked 
$('button').on('click', function() { 
    // Find which button was clicked, so we know which tab to target 
    var tabTarget = $(this).data('tab'); 

    // Manually show the modal, since we are not doing it via data-toggle now 
    $('.bd-example-modal-lg').modal('show'); 

    // Now show the selected tab 
    $('.nav-tabs a[href="#' + tabTarget + '"]').tab('show'); 
}); 

Note that as the docs describe、あなたがaリンクとタブをターゲット：Javascriptが仕事をしますタブ自体のdivではなく、それを開く。