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

Question

I want to open a specific tab of bootstrap 4 from external page link .

Page 1: nav.html I want to go from this page one to second page

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<a href="index.html#tab-1">tab 1</a>
<a href="index.html#tab-2">tab 2</a>
<a href="index.html#tab-3">tab 3</a>


 <script src="assets/js/jquery-3.3.1.min.js"></script>
 <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

Page 2: index.html this page where I want to open specific tab

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab</title>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
    <div>
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
                <p>Content for tab 1.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-2">
                <p>Content for tab 2.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-3">
                <p>Content for tab 3.</p>
            </div>
        </div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

I use bootstrap 4 in my page.

score 11 · Answer 1 · answered Jan 08 '19 at 05:33

11

You just need to add this code to the bottom of the index.html page:

<script>
    jQuery(document).ready(function ($) {
        let selectedTab = window.location.hash;
        $('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
    })
</script>

answered Jan 08 '19 at 05:33

Seyed Abbas Seyedi

378
3
11

I tested that is worked correctly. In this code because your tabs linkes are exist in nav.html page. You must be using url# or localstorage or cookie or session or other way for save clicked link then used that in index.html page for add .active and .show class to Intended .nav-link and .tab-pane and remove these class from other nav-items and tab-panes. – Seyed Abbas Seyedi Jan 09 '19 at 05:36
See: https://stackoverflow.com/a/60099912/381082 which uses the hashchange event as well as document.ready to overcome navigation issues within the same page. – DeveloperDan Feb 06 '20 at 16:56

score 1 · Answer 2 · answered Jan 09 '19 at 05:23

I used all your codes and i add one small script to bottom of the index.html page. But I did not know what this asset/css/styles.css file, for this reason i ignore that.

This code work correctly without error.

nav.html page:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<a href="index.html#tab-1">tab 1</a>
<a href="index.html#tab-2">tab 2</a>
<a href="index.html#tab-3">tab 3</a>


<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</body>
</html>

index.html page

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
    <div>
        <ul class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link active" role="tab" data-toggle="tab" href="#tab-1">Tab 1</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-2">Tab 2</a></li>
            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3">Tab 3</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" role="tabpanel" id="tab-1">
                <p>Content for tab 1.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-2">
                <p>Content for tab 2.</p>
            </div>
            <div class="tab-pane" role="tabpanel" id="tab-3">
                <p>Content for tab 3.</p>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>
        jQuery(document).ready(function ($) {
            let selectedTab = window.location.hash;
            $('.nav-link[href="' + selectedTab + '"]' ).trigger('click');
        })
    </script>
</body>

</html>

score 0 · Answer 3 · answered Mar 02 '22 at 14:30

0

When working with Bootstrap 4 you can use this code below:

var urlTab = window.location.hash;

$('.nav-link[href="' + urlTab + '"]' ).trigger('click');

answered Mar 02 '22 at 14:30

Godswill Ugochukwu

1
2

score 0 · Answer 4 · answered Apr 20 '22 at 18:55

An additional way would be to use a URL parameter instead of the hash. The advantage of this approach is that the page will not automatically jump down the hashed ID which may not be desired.

Example Link Structure: mywebsite.com/?tab=myTabsID

// Javascript to enable link to tab
 const queryString  = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 let selectedTab = urlParams.get('tab');
 if (urlParams.has('tab')) {
   jQuery('.nav-link[href="'+'#'+selectedTab+'"]' ).trigger('click');
 }

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

4 Answers4

Linked