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.