Looking to implement a basic hash router for navigating a Bootstrap 4.6 tab component.
Having an issue where calling the .tab('show') function toggles the correct tab but does not toggle its corresponding tab-pane section. Ensured that the tab-panes id attribute matches the tabs href attribute.
I managed to manually show and hide the tab panes, but Bootstrap should handle this automatically. Anyone have a solution?
Thank you!
hashRouteInit = function(callback) {
window.addEventListener('hashchange', callback, false);
}
const routes = {
'#/units': function() {
console.log('units');
},
'#/clients': function() {
console.log('clients');
},
'#/searches': function() {
console.log('searches');
},
};
hashRouteInit(function() {
console.log(window.location.hash);
console.log(routes);
if (routes[window.location.hash] != undefined) {
/*how can i remove the following 3 lines and let .tab('show') show the tab pane*/
/*$(`.tab-content .show`).hide();
$(`.tab-content .show`).removeClass('show');
$(`.tab-content .show`).removeClass('active');*/
$(`#stats-tabs a[href="${window.location.hash}"]`).tab('show');
/*how can i remove the following 3 lines and let .tab('show') show the tab pane*/
/*$(`.tab-content .tab-pane[id="${window.location.hash}"]`).addClass('show');
$(`.tab-content .tab-pane[id="${window.location.hash}"]`).addClass('active');
$(`.tab-content .tab-pane[id="${window.location.hash}"]`).show();*/
routes[window.location.hash]();
}
});<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="container">
<ul class="nav nav-tabs" id="stats-tabs" role="tablist">
<li class="nav-item" role="presentation"><a class="nav-link active" id="units-tab" href="#/units" role="tab" aria-controls="units" aria-selected="true">Units</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="clients-tab" href="#/clients" role="tab" aria-controls="clients" aria-selected="false">Clients</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" id="searches-tab" href="#/searches" role="tab" aria-controls="searches" aria-selected="false">Searches</a></li>
</ul>
<div class="tab-content pt-2" id="stats-tabs-content">
<div class="tab-pane fade show active" id="#/units" role="tabpanel" aria-labelledby="units-tab">units</div>
<div class="tab-pane fade" id="#/clients" role="tabpanel" aria-labelledby="clients-tab">clients</div>
<div class="tab-pane fade" id="#/searches" role="tabpanel" aria-labelledby="searches-tab">
<div id="search-overview-searches">searches</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>