Add deep linking in the bootstrap nav tabs

Add deeplinking in the bootstrap nav tabs

How to add Deep linking in the bootstrap nav tabs? or

How to open bootstrap nav tabs by detecting # value from the URL and also update # value in the URL upon clicking the nav item?

You will get answers to both of these scenarios in this article.

What is deep linking?

In the context of the web, deep linking 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 main page. In this article, we will see how to apply deep linking 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 very cool features for nav-tabs with some default stylings. It came with a very nice effect of changing content on clicking the navigation:

bootstrap nav tabs Deep linking
Bootstrap Nav Tabs

You can create Bootstrap nav tabs using the following 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 the content using a URL dynamically, you need to add the # 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 deep linking 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 the # 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 deep linking)

Opens up nav tab content by detecting # value from the URL and adds # 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.

Related Posts