Bootstrap 4 Modal anchor opens modal with specific tab active

Question

I am using bootstrap 4 modal with anchor tags that open the modal. Something like this:

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

I want the the anchor tab to open the modal and make its specific tab active. ie a href="#mind-me" should open the modal and have the #mind-me section as active. I would like to know if this is possible using HTML or some jQuery.

The rest of the code for the modal is below:

   <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

Same as in twitter-bootstrap 3, on show.bs.modal event:

$('#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');
});

Example in jsfiddle .