How to link to button class Bootstrap 5 tab?

Question

I am looking to directly link to a bootstrap 5 button class tab.

I have tried implementing the following:

Twitter Bootstrap 5 Tabs: Go to Specific Tab on Page Reload or Hyperlink

However, I did not have success.

My code is below for my nav-tabs and I setup my tab-pane according to: https://getbootstrap.com/docs/5.0/components/navs-tabs/#using-data-attributes

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="profile" aria-selected="false">Notes</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#nHistory" type="button" role="tab" aria-controlcontrols="contact" aria-selected="false">History</button>
    </li>
    <li class="nav-item ms-auto" role="presentation">
        <a href="/profile"><i class="bi bi-x-lg"></i></a>
    </li>
</ul>

What I am looking for is to link to something like mydomain.net/#notes and it select & open the notes tab.

Any help would be appreciated. Most solutions seem to be for bootstrap v4 and I cannot seem to port them.

score 0 · Answer 1 · answered Aug 21 '22 at 07:00

You have to give ids in navigation buttons and corresponding tab content properly. Then only queryselector will select the proper tab.

    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="general-tab" data-bs-toggle="tab" data-bs-target="#general" type="button" role="tab" aria-controls="home" aria-selected="true">General</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes" type="button" role="tab" aria-controls="profile" aria-selected="false">Notes</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button" role="tab" aria-controlcontrols="contact" aria-selected="false">History</button>
        </li>
        <li class="nav-item ms-auto" role="presentation">
            <a href="/profile"><i class="bi bi-x-lg"></i></a>
        </li>
    </ul>    
  
  <div class="tab-content">
    <div class="tab-pane active" id="general" role="tabpanel" aria-labelledby="general-tab">General</div>
    <div class="tab-pane" id="notes" role="tabpanel" aria-labelledby="notes-tab">Notes.</div>
    <div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">History</div>

  </div>
<script>
    var hash = location.hash.replace(/^#/, ""); 
    if (hash) {
      var triggerEl = document.querySelector("#"+hash+"-tab" );
      var tab = new bootstrap.Tab(triggerEl);
      tab.show();
    }
</script>

How to link to button class Bootstrap 5 tab?

1 Answers1