点击按钮切换Bootstrap标签页失效（含UpdatePanel场景）

这个问题我之前也碰到过，核心原因是UpdatePanel异步回发后破坏了Bootstrap Tab的事件绑定，同时你的标签面板HTML结构也有小问题，咱们一步步解决：

问题根源 #

当UpdatePanel完成异步回发时，它会替换内部的DOM元素，原来通过data-toggle="tab"绑定的Bootstrap Tab事件会失效。另外，你的前两个标签面板（Section7、Section8）缺少Bootstrap Tab要求的tab-pane类，这也会导致切换逻辑异常。

解决方案步骤 #

1. 修复Tab面板的HTML结构 #

给Section7和Section8加上Bootstrap Tab必需的类：

• 第一个默认激活的标签面板（Section7）需要tab-pane fade active
• 其他面板（Section8）需要tab-pane fade

修改后的代码片段：

<!-- Patient Information -->
<div role="tabpanel" runat="server" id="Section7" class="tab-pane fade active">
  <!-- 内部表单内容保持不变 -->
</div>

<!-- Financially Responsible Party -->
<div role="tabpanel" runat="server" id="Section8" class="tab-pane fade">
  <!-- 内部表单内容保持不变 -->
</div>

2. 重新绑定Tab事件（关键） #

在UpdatePanel异步回发完成后，手动重新初始化Bootstrap Tab组件。在页面底部添加这段JavaScript：

<script type="text/javascript">
    // 页面首次加载时初始化Tab
    $(document).ready(function() {
        setupTabs();
    });

    // 监听UpdatePanel异步回发结束事件
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
        setupTabs();
    });

    function setupTabs() {
        // 先移除旧绑定避免重复触发，再重新绑定Tab切换逻辑
        $('#TabList a').off('click').on('click', function(e) {
            e.preventDefault();
            $(this).tab('show');
        });
    }
</script>

3. 验证依赖文件 #

确保页面正确引入了jQuery和Bootstrap JS，且顺序正确（先引入jQuery，再引入Bootstrap），比如：

<script src="jquery-3.6.0.min.js"></script>
<script src="bootstrap.min.js"></script>

（如果使用Bootstrap 4/5版本，替换对应的JS文件链接即可）

额外检查点 #

• 确认页面中存在ScriptManager控件（使用UpdatePanel必须包含）：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

• 你的UpdatePanelTriggers配置已经正确设置了AsyncPostBackTrigger，这部分没问题。

这样修改后，既能保留UpdatePanel的局部刷新特性，又能让Bootstrap标签页正常切换了。

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