在Razor Pages中实现选项卡面板时无法解析tabpanel ID求助

1. 修正版本匹配问题 #

你当前使用Bootstrap 5.1.0，但复制了5.2版本的示例代码，部分API逻辑存在差异。直接采用5.1.0官方标准的选项卡结构：

• 选项卡按钮需配置data-bs-toggle="tab"，用data-bs-target指定对应面板ID；面板需添加class="tab-pane fade"，默认激活的面板额外加show active：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">个人资料</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">首页面板内容</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">个人资料面板内容</div>
</div>

优先用data-bs-target替代直接的href绑定，避免Razor Pages路由解析逻辑干扰ID匹配。

2. 检查脚本加载顺序与依赖 #

确保在页面</body>标签前加载Bootstrap JS及依赖的Popper.js，DOM未加载完成时脚本无法绑定事件：

<script src="~/lib/popper.js/umd/popper.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js"></script>

3. 排查ID唯一性问题 #

• 右键检查页面元素，确认选项卡data-bs-target指向的ID与面板实际ID完全一致（Razor Pages部分组件可能自动给ID加前缀）。
• 若使用局部视图，给选项卡和面板的ID添加页面专属前缀（比如Index-home-tab、Index-home），避免全局ID冲突。

4. 手动初始化选项卡（备选方案） #

若自动绑定失效，添加手动初始化脚本：

<script>
  const tabTriggers = document.querySelectorAll('#myTab button')
  tabTriggers.forEach(trigger => {
    const tab = new bootstrap.Tab(trigger)
    trigger.addEventListener('click', e => {
      e.preventDefault()
      tab.show()
    })
  })
</script>

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