Bootstrap 4 模态锚打开模态，特定选项卡处于活动状态

Question

我正在使用 bootstrap 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.

模式的其余代码如下：

   <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

与 twitter 相同-bootstrap 3，在 show.bs.modal 事件上：

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

jsfiddle 中的示例。

Bootstrap 4 模态锚打开模态，特定选项卡处于活动状态

Bootstrap 4 Modal anchor opens modal with specific tab active

javascript

jquery

twitter-bootstrap

twitter-bootstrap-4