Reputation: 1
I found the following code in another post (which I can't find now) but can't get the code to work. As you can see from the attached image, I am getting close because the tab has a blue highlight whereas before I installed the code there was no highlight. A commenter to the post I can't find said some mods to this code were necessary but did not give specifics or an example. I added my page's URL, or at least the portion before the hash. Another commenter said this would not be active but didn't offer a solution.
TIA for any help.
<script>
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="2025_dko_home_need_to_renew_join.php#' + hash + '"]').tab('show active');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
</script>
Here's the tab's HTML code:
<div class="container-fluid">
<ul id="clothingnav1" class="nav nav-tabs" role="tablist">
<li class="nav-item"> <a class="nav-link active" href="#home1" id="hometab1" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Online Entry</a> </li>
<li class="nav-item"> <a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Advance Entries</a> </li>
I was expecting to be able to click on the tab's URL tab_id
and have the page open and go to the second tab.
--- Update 2026-01-17 ---
Final code (that seems to be working) for those that come along later with this issue. Thank you @C3roe!
<div class="container-fluid">
<ul id="clothingnav1" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#home1" id="hometab1" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Online Entry</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#paneTwo1" role="tab" id="hatstab1" data-toggle="tab" aria-controls="hats">Advance Entries</a>
</li>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../../../js/jquery-3.4.1.min.js"></script>
<!--Script must be after loading jquery-->
<script>
$(function(){
var hash = window.location.hash;
hash && $('ul#clothingnav1 li:last-child a#hatstab1').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
</script>
Upvotes: 0
Views: 42