zugzwang64
zugzwang64

Reputation: 1

How to re-direct to a particular bootstrap tab

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>

tab with blue border

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

Answers (0)

Related Questions