如何修复Bootstrap 5中data-bs-target无效导致选项卡无法切换的问题

问题原因&修复方案 #

你代码里一共存在5处导致选项卡无法正常切换的问题，按优先级修复即可：

• 属性不匹配问题：Bootstrap选项卡要求aria-controls属性值必须和对应面板的id完全一致：
  • Personal按钮的aria-controls现在写的是personal，对应面板id是personalPanel，改成personalPanel即可
  • Job按钮的aria-controls现在写的是job，对应面板id是jobPanel，改成jobPanel即可
• 动态类未绑定问题：personalPanel的class硬编码为tab-pane fade，没有使用你提前定义好的动态变量<%=per_class%>，替换成动态变量即可保证服务端渲染的激活状态正确
• 属性不匹配问题：面板的aria-labelledby要和对应按钮的id匹配：
  • 给Personal按钮加id="personal-tab"属性
  • 给Job按钮加id="job-tab"属性
• JS重复加载问题：你在head里已经用defer加载了一次bootstrap.bundle.min.js，body末尾又重复加载了一次，两次加载会导致Bootstrap实例冲突，删除body末尾的那一行js引入即可
• HTML结构错误：tab-content容器内，jobPanel闭合标签之后的form不属于任何tab面板，要么放到对应的tab-pane内部，要么移到tab-content容器外面，避免结构异常干扰组件初始化

修复后的核心代码片段参考：

<!-- 导航按钮部分 -->
<ul class="nav nav-pills nav-fill">
    <li class="nav-item">
       <button id="personal-tab" class="<%=per_link%>" data-bs-toggle="tab" data-bs-target="#personalPanel" role="tab"  aria-controls="personalPanel" aria-selected="<%=per_sel%>" <%=per_dis%>>Personal</button>
    </li>
    <li class="nav-item">
      <button id="job-tab" class="<%=job_link%>" data-bs-toggle="tab" data-bs-target="#jobPanel" role="tab" aria-controls="jobPanel" aria-selected="<%=job_sel%>" <%=job_dis%>>Job</button>
    </li>
</ul>
<!-- 面板部分 -->
<div class="tab-content" id="appTabContent">
   <div class="<%=per_class%>" id="personalPanel" role="tabpanel" aria-labelledby="personal-tab">
       <form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
          <h2>Personal Information</h2>
          <div class="row my-2 g-4">
              <div class="col-12 col-md-5">
                  <label for="firstName" class="form-label">First Name</label>
                  <input type="text" id="firstName" name="firstname" value="<%=firstname%>" class="form-control" aria-label="First Name" required>
              </div>
              <div class="col-12 col-md-5">
                  <label for="lastName" class="form-label">Last Name</label>
                  <input type="text" id="lastName" name="lastName" value="<%=lastName%>" class="form-control" aria-label="Last Name" required>
              </div>
          </div>
       </form>
   </div>
   <div class="<%=job_class%>" id="jobPanel" role="tabpanel" aria-labelledby="job-tab">
       Job
       <!-- Job相关表单内容可放到此处 -->
       <form method="Post" name="applyForEmployment" action="applyForEmployment.asp" enctype="multipart/form-data">
       </form>
   </div>
</div>

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