Bootstrap 4.6.0升级至5.x.x后导航标签active状态异常求助

升级Bootstrap从4.6.0到5.x后，将data-toggle替换为data-bs-toggle，标签页内容能正常切换，但第一个标签的<li>始终保持active样式，点击其他标签也不会移除该样式。

问题原因 #

Bootstrap 5 对标签页组件的DOM结构和类名规则做了核心调整：

• Bootstrap 4 中，active类是添加在<li>元素上；
• Bootstrap 5 中，active类需要添加在<a>标签（需配合.nav-link类）上，<li>不再承载active状态。
  你的自定义CSS全部针对.nav-tabs > li.active编写，而Bootstrap5切换标签时只会修改<a>的active类，导致<li>的样式始终不会更新。

解决方案 #

分两步修改：

1. 修正HTML结构与属性

• 给所有标签页的<a>标签添加.nav-link类（Bootstrap5 nav组件必需）；
• 将active类从<li>移到对应的<a>标签上；
• 确保data-toggle替换为data-bs-toggle；
• 补充aria-selected属性（Bootstrap5推荐的无障碍属性）。

修改后的HTML代码：

<div class="col-lg-12">
    <ul class="nav nav-tabs" id="type-nav">
        <li id="liTabLinkID" class="nav-item">
            <a href="#tab-linkid" class="nav-link clsLinkSel active" data-bs-toggle="tab" aria-expanded="true" aria-selected="true" style="color: #333">
                <i class="fal fa-bars"></i>&nbsp;&nbsp;Link ID(s) 
            </a>
        </li>
        <li id="liTabRoute" class="nav-item">
            <a href="#tab-route" class="nav-link clsLinkSel" data-bs-toggle="tab" aria-expanded="false" aria-selected="false" style="color: #333">
                <i class="fas fa-road"></i>&nbsp;&nbsp;Route 
            </a>
        </li>
    </ul>
    <div class="tab-content" id="query-type-tabs">
        <div class="tab-pane top-tab-pane active" id="tab-linkid" style="padding: 20px 10px;border-left: solid 1px #ddd;border-right: solid 1px #ddd">
            <div>
                <div style="float: left">
                    <label><b>Links: </b></label>&nbsp;&nbsp;<span id="spnLinkCnt">0</span>
                </div>
                <div style="float: left; margin-left: 20px; padding-top: 1px">
                    <a href="#" onclick="FitToBounds(); return false" class="clsLinkIcons" style="margin-right: 7px"><i class="far fa-expand" title="Fit To Bounds"></i></a><a href="#" onclick="ViewLinkIDs(); return false" class="clsLinkIcons" style="margin-right: 7px"><i class="far fa-search" title="View Link ID's"></i></a><a href="#" onclick="OpenAddLinkIDs(); return false" style="margin-right: 7px"><i class="far fa-plus" title="Add Link ID's manually"></i></a><a href="#" onclick="ClearLinkIDs(); return false" class="clsLinkIcons" style="margin-right: 7px"><i class="far fa-trash" title="Clear Selection"></i></a>
                </div>
                <div style="float: left">
                    <label id="linkIDReq" style="color: #F00; display: none; margin-left: 10px">* required</label><a class="clsInfo"><i class="fas fa-question-circle"></i></a><div class="tooltiptext">Click on the map to select/deselect links.</div>
                </div>
                <div style="clear: both"></div>
            </div>
            <div id="seldeets">
                <!-- Holds selection info (table?)-->
            </div>
        </div>
        <div class="tab-pane top-tab-pane" id="tab-route" style="padding: 20px 10px; border-left: solid 1px #ddd; border-right: solid 1px #ddd">
            <div class="clsSelStateDiv">
                Select a State on the top-left
            </div>
            <div class="clsStateDiv" style="display: none">
                <label><b>Route:</b></label>&nbsp;&nbsp;<select id="selRoute" onchange="ShowRoute()" class="form-control" style="display: inline-block; width: 250px"></select>&nbsp;&nbsp;&nbsp;<a id="aRouteBounds" href="#" onclick="FitToRouteBounds(); return false" style="margin-right: 7px; display: none"><i class="far fa-expand" title="Fit To Bounds"></i></a><label id="routeReq" style="color: #F00; display: none; margin-left: 5px">  * required</label><a class="clsInfo"><i class="fas fa-question-circle"></i></a><div class="tooltiptext">Routes can be created in <b>Routing > Route Builder</b> on the side menu, or by clicking the <i>manage routes</i> link.<br /><br />Results can be ordered by the link sequence along the route.</div><a href="/routing/dataroutes" style="margin-left: 15px">manage routes</a>
            </div>
        </div>
    </div>
</div>

2. 修正CSS选择器

将所有针对.nav-tabs > li.active的选择器，改为通过.nav-link.active的父元素来设置样式：

修改后的CSS代码：

.nav-tabs {
    margin-bottom: -1px;
}

/* 针对active状态的.nav-link所在的li设置边框 */
.nav-tabs > li:has(.nav-link.active) {
    border-left: 1px solid #0094ff;
    border-right: 1px solid #0094ff;
    border-top: 1px solid #0095ff !important;
    box-shadow: -4px 4px 4px 0 rgba(0, 0, 0, 0.1);
}

/* 非active状态的li设置底部边框 */
.nav-tabs > li:not(:has(.nav-link.active)) {
    border-bottom: 1px solid #0094ff;
}

.tab-content:before {
    width: 100%;
    background: #fff;
    height: 8px;
    content: "";
    display: block;
    position: relative;
    top: 0px;
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
}

.tab-content {
    padding-top: -10px !important;
}

.nav-tabs .nav-link.active {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    margin-right: 0 !important;
}

注：如果需要兼容不支持:has()选择器的旧浏览器，可以通过监听标签页切换事件，手动给<li>添加/移除类：

document.querySelectorAll('#type-nav a').forEach(tab => {
  tab.addEventListener('shown.bs.tab', function () {
      // 移除所有li的自定义active类
      document.querySelectorAll('#type-nav li').forEach(li => li.classList.remove('tab-active'));
      // 给当前tab的父li添加类
      this.parentElement.classList.add('tab-active');
  });
});

然后将CSS中的:has(.nav-link.active)替换为.tab-active即可。

验证效果 #

修改后，点击标签页时，Bootstrap5会自动切换<a>标签的active类，对应的<li>样式也会同步更新，第一个标签不会再固定保持active样式。

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