Hi I need to upgrade my page from bootstrap 4.6.0 to bootstrap 5.x.x
As soon as I upgrade data-toggle to data-bs-toggle the active tab stops working i.e. first tab always remains active no matter how many tabs I press. (tab-content still changes)
CSS .nav-tabs { margin-bottom: -1px; }
.nav-tabs > li.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);
}
.nav-tabs > li:not(.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 > li.active > a {
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin-right: 0 !important;
}
HTML
<div class="col-lg-12">
<ul class="nav nav-tabs" id="type-nav">
<li id="liTabLinkID" class="active">
<a href="#tab-linkid" class="clsLinkSel" data-toggle="tab" aria-expanded="true" style="color: #333"><i class="fal fa-bars"></i> Link ID(s) </a>
</li>
<li id="liTabRoute" class="">
<a href="#tab-route" class="clsLinkSel" data-toggle="tab" aria-expanded="false" style="color: #333"><i class="fas fa-road"></i> 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> <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> <select id="selRoute" onchange="ShowRoute()" class="form-control" style="display: inline-block; width: 250px"></select> <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>
The .active class is added to the a tag, while your custom styles target li element.
So, change your selectors throughout to target a tag:
instead of:
.nav-tabs > li.active {
and so on, use:
.nav-tabs > li > a.active {
throughout.
.nav-tabs {
margin-bottom: -1px;
}
.nav-tabs>li>a.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);
}
.nav-tabs>li>a:not(.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>li.active>a {
-webkit-box-shadow: none !important;
box-shadow: none !important;
margin-right: 0 !important;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<div class="col-lg-12">
<ul class="nav nav-tabs" id="type-nav">
<li id="liTabLinkID" class="active">
<a href="#tab-linkid" class="clsLinkSel active" data-bs-toggle="tab" aria-expanded="true" style="color: #333"><i class="fal fa-bars"></i> Link ID(s) </a>
</li>
<li id="liTabRoute" class="">
<a href="#tab-route" class="clsLinkSel" data-bs-toggle="tab" aria-expanded="false" style="color: #333"><i class="fas fa-road"></i> 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> <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>
<select id="selRoute" onchange="ShowRoute()" class="form-control" style="display: inline-block; width: 250px"></select> <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>note: also, not sure what the custom styles do, but the correct BS style structure for tabs (in both 4x and 5x versions) is:
nav-tabs -> nav-item -> nav-link:
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#tab-linkid" class="nav-link">