How to make tab active using URL hash?

Question

I want to be able to send users a link that includes a hash that will open a specific tab on that link's page.

However, no matter which hash I place in the URL, that tab is never selected. Clicking the tab buttons work just fine, though.

How can I make a tab active simply by grabbing the hash from the URL?

This is my partial code:

<script>
$('.userhref').click(function(){
    $('#nav').find('li').find('a[href=' + $(this).attr('href') + ']').closest('li').addClass('active').siblings('li').removeClass('active');
});
</script>

<div class="tabbable nav-tabs-container" style="max-width:1000px;">
  <ul class="nav nav-tabs" id="nav" name="tabs" role="tablist">
    <li role="presentation"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab"> Description</a></li>
    <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab"> Specs</a></li>
  </ul>
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="tab1">
      <h3>Tab 1</h3>
    </div>
    <div role="tabpanel" class="tab-pane" id="tab2">
      <h3>Tab 2</h3>
    </div>
  </div>
</div>

The full code and working example can be seen here:

https://www.s22.us/tabs.php#tab3

None of the solutions I've found work in this scenario.

[`:target`](//developer.mozilla.org/en/docs/Web/CSS/:target), [`hash`](//developer.mozilla.org/en/docs/Web/API/Location/hash), [How to read the #hash (or fragment identifier) of the current page URL?](/q/15741421/4642212). _“None of the solutions I've found work in this scenario.”_ — Please [edit] your question and provide a [mre]. — Sebastian Simon, Jun 10 '23 at 18:34
What code are you using to read the fragment from the URL and set the active tab? You've only posted the HTML — Rory McCrossan, Jun 10 '23 at 18:34

Unmitigated · Accepted Answer · 2023-06-10T19:05:16.780

1

You can select the appropriate tab based on location.hash and trigger a click on it on page load as well as the hashchange event.

function changeTab() {
    $(`a[role=tab][href='${location.hash}']`).click();
}
changeTab();
window.addEventListener('hashchange', changeTab);

edited Jun 10 '23 at 19:05

answered Jun 10 '23 at 18:40

Unmitigated

76,500
11
62
80

This works, but only if I manually refresh the window. Using `location.reload();` does nothing. Is there a way to make this work the first time? – Frank Jance Jun 10 '23 at 18:59
@FrankJance I've updated my answer. Place this script right before the closing body tag. – Unmitigated Jun 10 '23 at 19:05
Success! Thanks so much. – Frank Jance Jun 10 '23 at 19:19
@FrankJance Happy to help. – Unmitigated Jun 10 '23 at 19:19

How to make tab active using URL hash?

1 Answers1