How to access a particular tab in Bootstrap 5 using an external link

Question

How to access a particular tab in Bootstrap 5 using an external link

Is there a way to direct users to a specific tab upon clicking a link on another page? Check out the example below:

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

On Products.html, you can find the following code for the tabs:

<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>

If you are looking to redirect from the products button to the solutions tab, make sure to incorporate Bootstrap 5.1 in all your pages.

javascript html css bootstrap-5

Answer 1

Answer №1

It's been a while since this was posted, so I'm not sure if you've already found a solution. Here's what worked for me:

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

You can find more information in the Bootstrap 5 documentation at: https://getbootstrap.com/docs/5.1/components/navs-tabs/#via-javascript

Answer 2

It's been a while since this was posted, so I'm not sure if you've already found a solution. Here's what worked for me:

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

You can find more information in the Bootstrap 5 documentation at: https://getbootstrap.com/docs/5.1/components/navs-tabs/#via-javascript

Answer 3

Answer №2

To link to a specific tab, simply add the tab's id at the end of your URL after the "#" symbol.

<a href="products.html#solve">click here to see more</a>

Answer 4

To link to a specific tab, simply add the tab's id at the end of your URL after the "#" symbol.

<a href="products.html#solve">click here to see more</a>

Answer 5

Answer №3

Inspect the root directory and write down the complete path starting from your index.html to products.html

Then paste this code snippet:

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

For instance:
If I have the index file in a folder named folder1, inside which there is a subfolder called folder2 containing the products page:

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

Alternatively:
If I want to navigate back to index.html:

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

../ indicates moving up to the previous/parent folder level

Visit the Mozilla Anchor Documentation

Answer 6

Inspect the root directory and write down the complete path starting from your index.html to products.html

Then paste this code snippet:

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

For instance:
If I have the index file in a folder named folder1, inside which there is a subfolder called folder2 containing the products page:

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

Alternatively:
If I want to navigate back to index.html:

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

../ indicates moving up to the previous/parent folder level

Visit the Mozilla Anchor Documentation

Answer 7

Answer №4

I have done extensive research and now I am coding according to bootstrap 5. I have two files, index.html and service.html, where in service.html I have tabs that are directly linked from the index menu for services.

//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.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110f110d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378667864">[email protected]</a>/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>
    
... (remaining code omitted for brevity) ...

</body>
</html>

//here is service .html code

<!DOCTYPE html>
<html lang="en">
...
   remaining HTML code of the service.html file here....
...

</body>
</html>

Answer 8

I have done extensive research and now I am coding according to bootstrap 5. I have two files, index.html and service.html, where in service.html I have tabs that are directly linked from the index menu for services.

//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.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3f5d50504b4c4b4d5e4f7f0a110f110d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="56343939222522243726166378667864">[email protected]</a>/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>
    
... (remaining code omitted for brevity) ...

</body>
</html>

//here is service .html code

<!DOCTYPE html>
<html lang="en">
...
   remaining HTML code of the service.html file here....
...

</body>
</html>

Answer 9

Answer №5

To transition from product.html to solution.html when clicking, simply add the following href code:

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

Answer 10

To transition from product.html to solution.html when clicking, simply add the following href code:

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

How to access a particular tab in Bootstrap 5 using an external link

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The AJAX navigation feature does not function properly on Windows or Safari browsers, whether on a Mac or PC

Surprising "unexpected end of line" JavaScript lint notification out of nowhere

Unable to transfer a function to a component using <Route /> tag

Transform the JavaScript object received from an AJAX request into HTML code

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

Next.js version 14 is having difficulties displaying the loading.tsx file

What is the regular expression that allows numbers between 1 and 24, including decimals?

When working on my asp.net webform, I incorporated an AgreementCheckBox along with a CustomValidator. However, I encountered an issue where the error message

Guide on sending a key to a text input field using JavaScript

Dynamically setting properties in a Vue component using Angular

Obtain the parameter of a parent function that runs asynchronously

Transformation of CSS into SASS (or LESS)

Eliminating clutter in bespoke event handlers - eliminating the necessity for the 'event' parameter

Having trouble obtaining data from the database and showing it on the webpage

What is the best way to eliminate base tags from jQuery mobile scripts?

Express npm dependency fails to start globally

Styling text using SVG in HTML

Tips for repositioning a node element as the first child within its parent element

Launch a web application utilizing a node.js server hosted on Firebase

Adjusting the size based on the screen width of various devices