Bootstrap 4标签页切换异常：内容重叠无法切换问题求助

问题根源分析 #

你的代码存在两个核心问题：

• 两个标签页内容容器同时添加了active和show类，导致初始状态下内容重叠显示，切换逻辑失效
• 未处理UpdatePanel异步回发对Bootstrap标签页事件的破坏

修复步骤 #

1. 修正标签页内容的类属性

仅给第一个标签页内容保留active和show类，第二个标签页仅保留fade类：

<nav class="nav nav-tabs nav-justified">
    <a class="nav-item nav-link active" data-toggle="tab" href="#teacher">Teacher Remarks</a>
    <a class="nav-item nav-link" data-toggle="tab" href="#marks">Marks</a>
</nav>

<div class="tab-content">
    <div id="teacher" role="tabpanel" class="tab-pane fade show active" aria-labelledby="teacher">
        <asp:UpdatePanel id="updPnl1">
            <ContentTemplate>
                Content of div1
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

    <div id="marks" role="tabpanel" class="tab-pane fade" aria-labelledby="marks">
        <asp:UpdatePanel id="updPnl2">
            <ContentTemplate>
                Content of div2
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</div>

2. 确保引入Bootstrap 4的依赖文件

Bootstrap 4依赖jQuery和Popper.js，需在页面中正确引入（建议放在</body>标签前）：

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

3. 处理UpdatePanel异步回发后的标签页初始化

UpdatePanel异步刷新会导致Bootstrap标签页事件失效，需通过ScriptManager的EndRequest事件重新绑定逻辑：

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
        $('.nav-tabs a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>

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