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.
Just put an id of your tab in your link after "#"
<a href="products.html#solve">view all</a>
If you want to move from product.html to solution.html onclick you can use the href:
<a href="solution.html">solution</a>
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