Bootstrap动态标签切换后仍保持激活状态导致元素堆叠问题求助

嗨，我看你在用Bootstrap 5做大学项目的文本编辑器网站，用了动态标签但遇到切换后标签还保持激活、元素堆叠的问题对吧？我帮你梳理下可能的问题点和解决办法，应该能帮你搞定～

首先，最容易忽略的一点：你只引入了Bootstrap的CSS，但没加它的JavaScript文件！Bootstrap的动态标签切换是依赖JS组件的，没有JS的话，点击标签只会触发默认的锚点行为，不会自动切换标签的激活状态和面板的显示隐藏，这大概率是你遇到问题的核心原因。

接下来给你一步步的修复方案：

1. 补上Bootstrap的JS文件 #

在页面的末尾（</body>标签之前）加上这段代码：

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

2. 检查标签和面板的状态设置 #

Bootstrap的标签需要明确设置初始激活状态，不然切换逻辑会混乱：

• 给默认激活的标签按钮加上active类，并且把aria-selected设为true；其他标签按钮去掉active类，aria-selected设为false
• 对应的面板里，默认激活的要加active show类，其他面板只保留tab-pane fade类

3. 完整的示例代码参考 #

我把你的代码补全修正后，应该是这样的，你可以对照着调整自己的代码：

<!--Bootstrap styling import-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!--Creation of the dynamic tabs-->
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link px-4 active" id="file-tab" data-bs-toggle="tab" data-bs-target="#file-tab-pane" type="button" role="tab" aria-controls="file-tab-pane" aria-selected="true">文件</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link px-4" id="edit-tab" data-bs-toggle="tab" data-bs-target="#edit-tab-pane" type="button" role="tab" aria-controls="edit-tab-pane" aria-selected="false">编辑</button>
    </li>
    <!-- 你可以继续添加其他标签，比如视图、帮助等 -->
</ul>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade active show" id="file-tab-pane" role="tabpanel" aria-labelledby="file-tab" tabindex="0">
        <!-- 这里放文件菜单的内容，比如新建、打开、保存按钮 -->
        <div class="p-3">
            <button class="btn btn-outline-primary me-2">新建</button>
            <button class="btn btn-outline-secondary me-2">打开</button>
            <button class="btn btn-outline-success">保存</button>
        </div>
    </div>
    <div class="tab-pane fade" id="edit-tab-pane" role="tabpanel" aria-labelledby="edit-tab" tabindex="0">
        <!-- 这里放编辑菜单的内容，比如复制、粘贴、撤销按钮 -->
        <div class="p-3">
            <button class="btn btn-outline-primary me-2">撤销</button>
            <button class="btn btn-outline-secondary me-2">重做</button>
            <button class="btn btn-outline-success">复制</button>
        </div>
    </div>
</div>

<!--Bootstrap JavaScript import-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

额外注意点 #

如果还是有问题，检查下有没有自定义的CSS或者JS干扰了Bootstrap的样式和逻辑：

• 比如你自己写了.active类，优先级比Bootstrap的高，导致状态切换后样式没变化
• 或者自定义了标签的点击事件，没有阻止默认行为，打乱了Bootstrap的切换逻辑

按照上面的步骤调整后，应该就能正常切换标签，不会出现元素堆叠的问题啦～

备注：内容来源于stack exchange，提问作者l_green1202