BootstrapHTMLJavaScriptjQuery

How to add deep linking in the bootstrap nav tabs

0
739
2020 / 06 / 10

Bootstrap offers a very cool features for nav-tabs. Using this section you can display multiple sections in place of one. It came with very nice effect of changing content on clicking the navigation:

Open bootstrap nav tabs by detecting # value from the URL and also update # value in the URL upon clicking the nav item.

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. 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

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);
        });

Hi, I am a full-stack web developer with 5+ years of experience in working with different web technologies. Do you want to ask something? just send me a message through the contact form. Please visit my portfolio at hamzamehmood.com. Thanks