Add deeplinking in the bootstrap nav tabs

What is deeplinking?

In the context of the web, deeplinking is the use of a hyperlink that links to a specific, generally searchable or indexed, piece of web content on a website, rather than the website’s mian page. In this article we will see how to apply deeplinking in the bootstrap nav tabs.

What are nav tabs?

Nav-tabs is a feature where we can display multiple sections in place of one. Bootstrap offers a very cool features for nav-tabs with some default stylings. It came with very nice effect of changing content on clicking the navigation:

You can create Bootstrap nav tabs using below HTML code:

<ul class="nav nav-tabs">   
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>   
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>      
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
</ul> 
<div class="tab-content">   
    <div id="home" class="tab-pane fade in active">     
        <h3>HOME</h3>     
        <p>Some content.</p>   
    </div>   
    <div id="menu1" class="tab-pane fade">     
        <h3>Menu 1</h3>     
        <p>Some content in menu 1.</p>   
    </div>   
    <div id="menu2" class="tab-pane fade">     
        <h3>Menu 2</h3>     
        <p>Some content in menu 2.</p>   
    </div> 
</div>

By default, only that nav content is opened to whom the class “active” is applied. If you want to open a content using URL dynamically, you need to add # value of content in the URL. This is not simply enough, you also have to write some simple JavaScript code to enable this feature. Opening the tab using the # from the URL is known as deeplinking in the bootstrap nav tabs.

Here I have compiled 3 methods to do so:

Method 1 – open nav tabs with scroll

Opens up nav tab content by detecting # value from the URL along with the scroll to that section if your page is lengthier.

$(function(){
     var hash = window.location.hash;
     hash && $('ul.nav a[href="' + hash + '"]').tab('show');
     $('.nav-tabs a').click(function (e) { 
           $(this).tab('show');     
           var scrollmem = $('body').scrollTop();     
           window.location.hash = this.hash;     
           $('html,body').scrollTop(scrollmem); 
     });
});

Method 2 – open nav tabs (simple method)

Opens up nav tab content by detecting # value from the URL.

var url = window.location.href;     
if (url.indexOf("#") > 0){     
    var activeTab = url.substring(url.indexOf("#") + 1);         
    $('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');     
}

Method 3 – open nav tabs and update URL (actual deeplinking)

Opens up nav tab content by detecting # value from the URL and add # value in the URL upon clicking the nav link item.

var url = window.location.href;
if (url.indexOf("#") > 0){
     var activeTab = url.substring(url.indexOf("#") + 1);
     $('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
}

$('a[role="tab"]').on("click", function() {
     var newUrl;
     const hash = $(this).attr("href");
     newUrl = url.split("#")[0] + hash;
     history.replaceState(null, null, newUrl);
});

So when the URL gets updated, you can simply copy that and open it anywhere. This will open the particular tab by default.