title: Remember Tab in Tab position on page refresh
body: <p>I have the following problem.
  In bootstrap i have Tab/Pill menu:</p>
  
  <pre><code>    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-2"&gt;
              &lt;div class="nav nav-tabs flex-column nav-pills" id="myTab" role="tablist" aria-orientation="vertical"&gt;
                  &lt;a class="nav-link active" id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="v-pills-home" aria-selected="true"&gt;Home&lt;/a&gt;
                  &lt;a class="nav-link" id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="v-pills-profile" aria-selected="false"&gt;Profile&lt;/a&gt;
                  &lt;a class="nav-link" id="messages-tab" data-toggle="pill" href="#messages" role="tab" aria-controls="v-pills-messages" aria-selected="false"&gt;Messages&lt;/a&gt;
                  &lt;a class="nav-link" id="settings-tab" data-toggle="pill" href="#settings" role="tab" aria-controls="v-pills-settings" aria-selected="false"&gt;Settings&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-10"&gt;
  
              &lt;div class="tab-content" id="v-pills-tabContent"&gt;
                  &lt;div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="v-pills-home-tab"&gt;...&lt;/div&gt;
                  &lt;div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"&gt;...&lt;/div&gt;
                  &lt;div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"&gt;...&lt;/div&gt;
                  &lt;div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"&gt;...&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and JS script like this:</p>
  
  <pre><code>&lt;script&gt;
      // Javascript to enable link to tab
      var url = document.location.toString();
      if (url.match('#')) {
          $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
      }
  
      // Change hash for page-reload
      $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash;
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>It work fine, but I want something like tab in tab.</p>
  
  <p>I have:</p>
  
  <p><a href="https://i.stack.imgur.com/25j7k.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/25j7k.png" alt="Tab1"></a></p>
  
  <p>but I want work something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/DYglF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DYglF.png" alt="TabinTab"></a></p>
  
  <p>and when i open tab "Profile Tab 2" in new windows it's not working.</p>