I’m using Bootstrap navs to have tabs on a page, with two primary tabs and within one tab there are several more tabs (subtabs, I’ll refer to them as). Using a hash they’re also directly linked, and the back button navigates between them.

The issue I’m encountering is that the back button doesn’t work entirely. I have put the basic code I’m using in this jsfiddle, but the issue can’t really be observed since the back button doesn’t interact with the code of the jsfiddle itself (unless there’s some way to do that, or another website to use?). I’ve thus also included it below.

The issue is when trying to use the back button to go back from the primary tab without subtabs to a subtab (in the code I’ve shared from ‘Tab One One’ to any ‘Tab Two [One, Two, Three]’). The URL hash changes, but visible tab does not change.

The one exception to this is if I clicked the other primary tab, the one with the subtabs (‘Tab One Two’), before clicking ‘Tab One One’, and so clicking back first activates ‘Tab One Two’, and from there whichever of its subtabs that are the hash become the active, visible tab. Does that make sense?

But a user wouldn’t have a reason to do that, they might click from a subtab to the other primary tab, and if they clicked back it would do nothing. Is there a way to have the back button navigate back to the subtabs directly, or have it first activate the primary tab they’re subtabs of to allow the subtabs to be visible?

Thank you!

<script>
        $(function(){
        var hash = window.location.hash;
        hash && $('ul.nav.nav-tabs a[href="' + hash + '"]').tab('show');
         
        $('ul.nav.nav-tabs a').click(function (e) {
            $(this).tab('show');
            window.location.hash = this.hash;
            $('body').scrollTop(0);
        });
        });
        
        window.addEventListener("popstate", function(e) {
          var activeTab = $('[href="' + location.hash + '"]');
    
          if (activeTab.length) {
              activeTab.tab('show');
          } else {
              $('.nav-tabs a:first').tab('show');
          }
      });
    </script>

<div class="container">
        <h1>Tabs on Tabs</h1>
        <p>Tabs in tabs between tabs</p>

        <ul class="nav nav-tabs nav-justified" role="tablist">
            <li class="nav-item" >
                <a class="nav-link" data-toggle="tab" href="#taboneone">Tab One One</a>
            </li>
            <li class="nav-item" >
                <a class="nav-link active" data-toggle="tab" href="#tabonetwo">Tab One Two</a>
            </li>
        </ul>

        <div class="tab-content">
            <div id="taboneone" class="tab-pane fade" role="tabpanel">
                  <h3>Tabs One One</h3>
            </div>
            
            <div id="tabonetwo" class="tab-pane fade show active" role="tabpanel">

                <ul class="nav nav-tabs nav-justified" role="tablist">
                    <li class="nav-item" >
                        <a class="nav-link active" data-toggle="tab" href="#tabtwoone">Tab Two One</a>
                    </li>
                    <li class="nav-item" >
                        <a class="nav-link" data-toggle="tab" href="#tabtwotwo">Tab Two Two</a>
                    </li>
                    <li class="nav-item" >
                        <a class="nav-link" data-toggle="tab" href="#tabtwothree">Tab Two Three</a>
                    </li>
                 </ul>
                 
                 <div class="tab-content">
                    <div id="tabtwoone" class="tab-pane fade show active" role="tabpanel">
                        <br/>
                        <h3>Tab Two One</h3>
                    </div>
                 
                    <div id="tabtwotwo" class="tab-pane fade" role="tabpanel">
                        <br/>
                        <h3>Tab Two Two</h3>
                    </div>
                 
                    <div id="tabtwothree" class="tab-pane fade" role="tabpanel">
                        <br/>
                        <h3>Tab Two Three</h3>
                    </div>
                </div>
             </div>
         </div>
     </div>