模态框内标签页切换失效问题求助（附jQuery及Bootstrap代码）

嘿，我看了下你的代码，发现几个导致标签页切换失灵的问题，咱们一步步来修正：

问题1：选择器不匹配 #

你的jQuery脚本里监听的是#mytabs元素，但HTML里的标签页容器id是#myTab（注意拼写和大小写），这直接导致事件根本没绑定到正确的元素上，自然触发不了切换逻辑。

问题2：标签页触发元素不符合Bootstrap规范 #

Bootstrap的标签页切换需要依赖正确的触发元素和属性：

• 你当前用<span>作为切换按钮，还加了data-toggle="modal"和data-target="#mymodal"，这会重复触发模态框，而不是触发标签页切换；
• 正确的做法是用<a>标签（或给元素加上data-toggle="tab"属性），并通过href（或data-target）关联对应的tab-pane容器id。

问题3：HTML结构不完整 #

你代码里的#LoginTab对应的tab-pane没有闭合标签，#RegistrationTab的内容也未完成，DOM结构混乱会导致Bootstrap无法正确识别标签页组件。

修正后的完整代码 #

HTML部分 #

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Authentication</h4>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs" id="myTab">
          <li class="nav-item">
            <a class="nav-link active cssbuttongo" data-toggle="tab" href="#LoginTab">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link cssbuttongo" data-toggle="tab" href="#RegistrationTab">Register</a>
          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="LoginTab">
            <!-- 这里填写登录表单的内容 -->
            登录表单内容示例：<br>
            <input type="text" placeholder="用户名"><br>
            <input type="password" placeholder="密码">
          </div>
          <div class="tab-pane" id="RegistrationTab">
            <!-- 这里填写注册表单的内容 -->
            注册表单内容示例：<br>
            <input type="text" placeholder="用户名"><br>
            <input type="email" placeholder="邮箱"><br>
            <input type="password" placeholder="密码">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery脚本（可选） #

其实只要正确设置Bootstrap的data属性，不需要额外脚本就能实现标签页切换。如果需要自定义点击逻辑，可使用如下代码：

$(document).ready(function() {
  $('#myTab a').on('click', function(e) {
    e.preventDefault(); // 阻止a标签的默认跳转行为
    $(this).tab('show');
  });
});

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