点击指定按钮切换Modal内Tab异常：始终默认显示Login Tab

看起来你遇到的问题是Bootstrap模态框里的Tab没法根据点击的按钮切换对吧？我之前也碰到过类似的情况——默认情况下不管点哪个按钮，模态框打开后总是第一个Tab激活，得手动加一点逻辑来处理。

问题根源 #

你的按钮现在只负责触发模态框显示，但没有告诉模态框要激活哪个Tab。Bootstrap的Tab组件默认会激活第一个.nav-item下的.nav-link，所以不管点哪个按钮，打开后都是Login Tab。

具体解决方案 #

1. 给按钮添加自定义标识 #

先给两个按钮加上自定义的data-tab-target属性，用来指定要激活的Tab：

<!-- Login按钮 -->
<button type="button" class="btn btn-primary btn-lg" 
        data-toggle="modal" data-target="#myModal" 
        data-tab-target="#login-tab">Login Button</button>

<!-- Registration按钮 -->
<button type="button" class="btn btn-secondary btn-lg" 
        data-toggle="modal" data-target="#myModal" 
        data-tab-target="#registration-tab">Registration Button</button>

2. 给Tab元素设置对应ID #

确保你的Tab导航项里的.nav-link有对应的ID，比如：

<div class="modal-body">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab">Login</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="registration-tab" data-toggle="tab" href="#registration" role="tab">Registration</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="login" role="tabpanel">
      <!-- Login表单内容 -->
    </div>
    <div class="tab-pane fade" id="registration" role="tabpanel">
      <!-- Registration表单内容 -->
    </div>
  </div>
</div>

3. 添加JavaScript监听模态框显示事件 #

当模态框显示的时候，根据按钮的data-tab-target来激活对应的Tab，同时切换Tab内容：

$('#myModal').on('show.bs.modal', function (event) {
  // 获取触发模态框的按钮
  var button = $(event.relatedTarget);
  // 获取要激活的Tab的ID
  var tabTarget = button.data('tab-target');
  
  // 移除所有Tab的active状态
  $('.nav-tabs .nav-link').removeClass('active');
  $('.tab-content .tab-pane').removeClass('active show');
  
  // 激活指定的Tab和对应的内容
  $(tabTarget).addClass('active');
  $(tabTarget.getAttribute('href')).addClass('active show');
});

为什么这样有效？ #

show.bs.modal是Bootstrap模态框的显示前事件，我们在这个时机里拿到触发按钮的自定义属性，然后手动切换Tab的激活状态，这样就能保证点击不同按钮时，模态框打开后显示对应的Tab了。

另外要注意，确保你的Bootstrap JS和jQuery都正确引入了，不然事件监听和Tab切换都没法正常工作哦～

内容的提问来源于stack exchange，提问作者Arafat Rahman