How to navigate to specific tab of bootstrap 5 from external link

user_16984749 0
Viewed 1038

I want to redirect a user to a specific tab after clicking the link of another page. Here is the code of page 1: index.html

<div class="products-btn">
    <a href="products.html#pills-profile">view all</a>
</div>

Page 2 Products.html:

<ul class="nav nav-pills justify-content-center" id="pills-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs- 
         target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria- 
         selected="true">products</button>
    </li>
    <li class="nav-item" role="presentation">
         <button class="nav-link" id="solve" data-bs-toggle="pill" data-bs-target="#pills- 
          profile" type="button" role="tab" aria-controls="pills-profile" aria- 
          selected="false">solutions</button>
    </li>
</ul>

I want to redirect the user from product's btn to solutions tab. I'm using bootstrap 5.1 in my all pages.

bootstrap-5 css html javascript
4 Answers

Just put an id of your tab in your link after "#" <a href="products.html#solve">view all</a>

user_156855980

check the root folder and write the full path from your index.html to products.html

then add this

<a href="{your path to the page}/products.html#pills-tab">products</a>

example:
I have the index and folder named folder1 inside this folder, there's another folder named folder2 that contains the products page:

<a href="folder1/folder2/products.html">products</a>

another example:
I want to go back to index.html:

<a href="../../index.html">products</a>

../ means go bach to previous/parent folder

anchor mozilla

user_180013010

This is kinda old, so not sure if you found an answer, but this is what worked for me.

if(window.location.hash == '#someHash' ) { 
 var someVarName = document.querySelector('#theTabID'); // theTabID of the tab you want to open
 var tab = new bootstrap.Tab(someVarName);
 tab.show();
}

Found in the bootstrap 5 docs here: https://getbootstrap.com/docs/5.1/components/navs-tabs/#via-javascript

user_27238680

If you want to move from product.html to solution.html onclick you can use the href:

<a href="solution.html">solution</a>
user_84038140
Related