Question 61378 in Twitter Bootstrap Question posted in

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

How could you link to bootstrap 5 tabs directly as with previous bootstrap methods according to?:

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

I’ve tried the following approach:

var hash = location.hash.replace(/^#/, ""); // ^ means starting, meaning only match the first hash
if (hash) {
  var someTabTriggerEl = document.querySelector("#" + hash + "");
  var tab = new bootstrap.Tab(someTabTriggerEl);

  tab.show();
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Currently solved this with:

    var hash = location.hash.replace(/^#/, "");
if (hash) {
  var triggerEl = document.querySelector("#" + hash + "-tab");
  triggerEl.click();
}

  2. 0

    Assuming the tab trigger is from a <ul> list, and the query string hash is the target in the href, then the Bootstrap 5 method for showing a tab when the page loads would be:

    <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="tab" href="#someTarget">Some Target</a>
  </li>
</ul>

    document.addEventListener("DOMContentLoaded", () => {
  const trigger = document.querySelector(`ul.nav a[href="${window.location.hash}"]`)
  const tab = new bootstrap.Tab(trigger)
  tab.show()
})

    The above does not check for invalid query string hash names or valid dom elements; add as-needed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search