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.
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.
Share asked Jan 23, 2022 at 6:34 Fahad SaifiFahad Saifi 491 silver badge5 bronze badges5 Answers
Reset to default 4This 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./docs/5.1/ponents/navs-tabs/#via-javascript
Just put an id of your tab in your link after "#"
<a href="products.html#solve">view all</a>
I have also resarched a lot and here I do code according to bootstrap 5 I have two files index.html and service.html and in service.html I have tabs which I opened directly from index menu service
//add this in service.html
const hash=window.location.hash;
const bsTab = new bootstrap.Tab(hash);
bsTab.show();<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light lower-header">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img class="logo-image" src="images/logo.png" alt="logo image"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="services.html#web-application-tab">Web Application</a></li>
<li><a class="dropdown-item" href="services.html#web-design-tab">Web Design</a></li>
<li><a class="dropdown-item" href="services.html/#">Android Applications</a></li>
<li><a class="dropdown-item" href="services.html">IOS Applications</a></li>
<li><a class="dropdown-item" href="services.html">E-Commerce</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">StudentCares</a></li>
<li><a class="dropdown-item" href="#">Graduex</a></li>
<li><a class="dropdown-item" href="#">StudentCares ID</a></li>
<li><a class="dropdown-item" href="#">Smart Class Room</a></li>
<li><a class="dropdown-item" href="#">Sensify</a></li>
<li><a class="dropdown-item" href="#">Mumbai Madiga Matrimony</a></li>
<li><a class="dropdown-item" href="#">Hardware Product</a></li>
<li><a class="dropdown-item" href="#">Electronic ID Card</a></li>
<li><a class="dropdown-item" href="#">Gates & Barriers</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
//here is service .html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<div class="page-wrapper">
<div class="preloader"></div>
<header>
<nav class="navbar navbar-expand-lg navbar-light lower-header">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img class="logo-image" src="images/logo.png" alt="logo image"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web Application</a></li>
<li><a class="dropdown-item" href="#">Web Design</a></li>
<li><a class="dropdown-item" href="#">Android Applications</a></li>
<li><a class="dropdown-item" href="#">IOS Applications</a></li>
<li><a class="dropdown-item" href="#">E-Commerce</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Product
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">StudentCares</a></li>
<li><a class="dropdown-item" href="#">Graduex</a></li>
<li><a class="dropdown-item" href="#">StudentCares ID</a></li>
<li><a class="dropdown-item" href="#">Smart Class Room</a></li>
<li><a class="dropdown-item" href="#">Sensify</a></li>
<li><a class="dropdown-item" href="#">Mumbai Madiga Matrimony</a></li>
<li><a class="dropdown-item" href="#">Hardware Product</a></li>
<li><a class="dropdown-item" href="#">Electronic ID Card</a></li>
<li><a class="dropdown-item" href="#">Gates & Barriers</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid main-container">
<section class="page-heading-section" id="particles-js">
<div class="page-heading">
<h1>Services</h1>
</div>
</section>
<section class="service-content-section">
<div class="tab-container">
<div class="row">
<div class="col-lg-8 col-md-8 col-sm-12 tab-col">
<div class="service-tab-container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="web-application-tab" data-bs-toggle="tab" data-bs-target="#web-application-tab-pane" type="button" role="tab" aria-controls="web-application-tab-pane" aria-selected="true">Web Application</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="web-design-tab" data-bs-toggle="tab" data-bs-target="#web-design-tab-pane" type="button" role="tab" aria-controls="web-design-tab-pane" aria-selected="false">Web Design</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="android-applications-tab" data-bs-toggle="tab" data-bs-target="#android-applications-tab-pane" type="button" role="tab" aria-controls="android-applications-tab-pane" aria-selected="false">Android Applications</button>
</li>
<li class="nav-item" role="presentation">
<button class="service-tab nav-link" id="ios-application-tab" data-bs-toggle="tab" data-bs-target="#ios-application-tab-pane" type="button" role="tab" aria-controls="ios-application-tab-pane" aria-selected="false">IOS Application</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="e-merce-tab" data-bs-toggle="tab" data-bs-target="#e-merce-tab-pane" type="button" role="tab" aria-controls="e-merce-tab-pane" aria-selected="false">E-Commerce</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="web-application-tab-pane" role="tabpanel" aria-labelledby="web-application-tab" tabindex="0">
<img class="img-fluid service-img" src="images/service-page-images/web-application.jpg" alt="">
<h6>Services</h6>
<h2 class="tab-heading">Web Application</h2>
<p>
content-1
</p>
</div>
<div class="tab-pane fade" id="web-design-tab-pane" role="tabpanel" aria-labelledby="web-design-tab" tabindex="0">
<img class="img-fluid service-img" src="images/service-page-images/web-design.jpg" alt="">
<h6>Services</h6>
<h2 class="tab-heading">Web Design</h2>
<p>
content-2
</p>
</div>
<div class="tab-pane fade" id="android-applications-tab-pane" role="tabpanel" aria-labelledby="android-applications-tab" tabindex="0">
<img class="img-fluid service-img" src="images/service-page-images/android-application.jpg" alt="">
<h6>Services</h6>
<h2 class="tab-heading">Android Applications</h2>
<p>content-3</p>
</div>
<div class="tab-pane fade" id="ios-application-tab-pane" role="tabpanel" aria-labelledby="ios-application-tab" tabindex="0">
<img class="img-fluid service-img" src="images/service-page-images/ios-application.jpg" alt="">
<h6>Services</h6>
<h2 class="tab-heading">IOS Application</h2>
content-4
</div>
<div class="tab-pane fade" id="e-merce-tab-pane" role="tabpanel" aria-labelledby="e-merce-tab" tabindex="0">
<img class="img-fluid service-img" src="images/service-page-images/e-merce.jpg" alt="">
<h6>Services</h6>
<h2 class="tab-heading">E-merce</h2>
<p>content-5</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 tab-col">
<div class="product-menu-container">
<h4>Our Products</h4>
<ul>
<li><a href="">demo1</a></li>
<li><a href="">demo2</a></li>
<li><a href="">demo3</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script>
const hash=window.location.hash;
const bsTab = new bootstrap.Tab(hash);
bsTab.show();
</script>
</body>
</html>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
If you want to move from product.html to solution.html onclick you can use the href:
<a href="solution.html">solution</a>