Skip to content

All topics  /  Bootstrap

How to Add Deep Linking to the Bootstrap 4 Tabs Component

Bootstrap ·

When “How to Add Deep Linking to the Bootstrap 4 Tabs Component” moves through design, development and browser testing, the official product overview can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with Bootstrap before adopting it in production.

Hi Guys,

Now, let's see tutorial of bootstrap 4 tab deep link. We will look at example of bootstrap 4 nav tabs link to tab.

In this article, we will implement a how to add deep linking to the bootstrap 4 tabs component. i would like to share with you bootstrap 4 add deep linking to the tab component.

Example 


<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <!-- custom CSS -->
        <link rel="stylesheet" href="css/main.css">
        <title>How to Add Deep Linking to the Bootstrap 4 Tabs Component</title>
    </head>
    <body>
        <!-- content here -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 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>
        <!-- custom JS -->
        <script src="js/main.js"></script>

    
        <ul class="nav nav-mytabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="city-attractions-tab" data-toggle="tab" href="#city-attractions" role="tab" aria-controls="city-attractions" aria-selected="false">City Attractions</a>
            </li>
        </ul>
        <div class="tab-content mytab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <!-- content here -->
            </div>
            <div class="tab-pane fade" id="history" role="tabpanel" aria-labelledby="history-tab">
                <!-- content here -->
            </div>
            <div class="tab-pane fade" id="city-attractions" role="tabpanel" aria-labelledby="city-attractions-tab">
                <!-- content here -->
            </div>
        </div>
        <script type="text/javascript">
            $(document).ready(() => {
                let url = location.href.replace(/\/$/, "");

         
                if (location.hash) {
                    const hash = url.split("#");
                    $('#myTab a[href="#'+hash[1]+'"]').tab("show");
                    url = location.href.replace(/\/#/, "#");
                    history.replaceState(null, null, url);
                    setTimeout(() => {
                        $(window).scrollTop(0);
                    }, 400);
                } 

           
                $('a[data-toggle="tab"]').on("click", function() {
                    let newUrl;
                    const hash = $(this).attr("href");
                    if(hash == "#home") {
                        newUrl = url.split("#")[0];
                    } else {
                        newUrl = url.split("#")[0] + hash;
                    }
                    newUrl += "/";
                    history.replaceState(null, null, newUrl);
                });
            });
        </script>
    </body>
</html>

It will help you...

More on this topic