ブートストラップ4モーダルアンカーは、特定のタブをアクティブにしてモーダルを開きます。

Question

モーダルを開くアンカータグ付きのブートストラップ4モーダルを使用しています。このような何か：

<div class="experience">  
     <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6 col-md-6 col-lg-3"> 
      <div class="btn-sensory-container"> 
       <a href="#energise-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-energise-2-outline btn-sensory"> <i class="img-energise"></i>Energise me</a> 
      </div> 
      </div> 
      <div class="col-xs-6 col-md-6 col-lg-3"> 
      <div class="btn-sensory-container"> 
       <a href="#renew-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-renew-3-outline btn-sensory"><i class="img-renew"></i> Renew me</a> 
      </div> 
      </div> 
      <div class="col-xs-6 col-md-6 col-lg-3"> 
      <div class="btn-sensory-container"> 
       <a href="#mind-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-mind-2-outline btn-sensory"><i class="img-mind"></i> Mind me</a> 
      </div> 
      </div> 
      <div class="col-xs-6 col-md-6 col-lg-3"> 
      <div class="btn-sensory-container"> 
       <a href="#illuminate-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-illuminate-2-outline btn-sensory"><i class="img-illuminate"></i> Illuminate me</a> 
      </div> 
      </div> 
     </div>  
     </div> 
    </div> 

は、私は、アンカータブがモーダルを開き、特定のタブをアクティブにしたいです。すなわちhref="#mind-me"はモーダルを開き、#mind-meセクションをアクティブにする必要があります。私はこれがHTMLかいくつかのjQueryを使って可能かどうかを知りたいと思います。

モーダルのコードの残りの部分は、以下である：Twitterのブートストラップ3と

<div class="modal fade modal-sensory" id="modal-sensory" tabindex="-1" role="dialog" aria-labelledby="modalsensory" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
     <div class="modal-header sensory"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true">X</span> 
      </button> 
      <!-- Nav tabs --> 
       <ul class="nav nav-tabs red tabs-3" role="tablist"> 
       <li class="nav-item" role="presentation"> 
        <a href="#energise-me" class="nav-link" aria-controls="energise-me" role="tab" data-toggle="tab">&nbsp;<span>Energise Me</span>&nbsp;</a> 
       </li> 
       <li class="nav-item" role="presentation"> 
        <a href="#renew-me" class="nav-link" aria-controls="renew-me" role="tab" data-toggle="tab">&nbsp;<span>Renew Me</span>&nbsp;</a> 
       </li> 
       <li class="nav-item" role="presentation"> 
        <a href="#mind-me" class="nav-link" aria-controls="mind-me" role="tab" data-toggle="tab">&nbsp;<span>Mind Me</span>&nbsp;</a> 
       </li> 
       <li class="nav-item" role="presentation"> 
        <a href="#illuminate-me" class="nav-link" aria-controls="illuminate-me" role="tab" data-toggle="tab">&nbsp;<span>Illuminate Me</span>&nbsp;</a> 
       </li> 
       </ul> 
      </div> 
      <div class="modal-body"> 
      <div class="sensory-items col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
       <!-- Tab panes --> 
       <div class="tab-content"> 
       <div role="tabpanel" class="tab-pane" id="mind-me">     
        <p>Energise me</p> 
       </div><!-- end tab-pane --> 
       <div role="tabpanel" class="tab-pane" id="mind-me">     
        <p>Renew me</p> 
       </div><!-- end tab-pane --> 
       <div role="tabpanel" class="tab-pane" id="mind-me">     
        <p>Mind me</p> 
       </div><!-- end tab-pane --> 
       <div role="tabpanel" class="tab-pane" id="mind-me">     
        <p>Illuminate me</p> 
       </div><!-- end tab-pane --> 
       </div><!-- end tab-content --> 
      </div><!-- end sensory-items --> 
     </div><!-- end modal-body --> 
     </div><!-- end modal-content --> 
    </div><!-- end modal-dialog --> 
</div><!-- end modal --> 

Answer 1

同じ、show.bs.modalイベントで：jsfiddleに

$('#modal-sensory').on('show.bs.modal', function (event) {  
    // Button that triggered the modal 
    var button = $(event.relatedTarget) 

    // the modal 
    var modal = $(this); 

    //show tab 
    modal.find('[href="'+button.attr("href")+'"]').tab('show'); 
}); 

例。