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

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 >
    <a href="products.html#pills-profile">view all</a>
</div>

Page 2 Products.html:

<ul  id="pills-tab" role="tablist">
    <li  role="presentation">
        <button  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  role="presentation">
         <button  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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

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