Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

Question

I'm developing a web page in which I'm using Twitter's Bootstrap Framework and their Bootstrap Tabs JS. It works great except for a few minor issues, one of which is I do not know how go directly to a specific tab from an external link. For example:

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

should go to the Home tab and the Notes tab respectively when clicked on the links from an external page

This question has also been brought up here: https://github.com/twitter/bootstrap/issues/2415 (and has a couple of solutions there). — Ztyx, Feb 06 '13 at 11:32
this helped me -> http://stackoverflow.com/questions/12131273/twitter-bootstrap-tabs-url-doesnt-change — JGilmartin, Jun 04 '13 at 14:36
Updated link to bootstrap issue is https://github.com/twbs/bootstrap/issues/2415 — bmihelac, Aug 28 '13 at 09:09
Here's a more complete solution that helped me: http://stackoverflow.com/a/22160443/263054 — Ruben, Mar 21 '14 at 12:03
Plugin that fixes this: https://github.com/timabell/jquery.stickytabs/ — Tim Abell, Nov 14 '14 at 11:49
This is a similar question as http://stackoverflow.com/q/18999501/873282 — koppor, Jul 28 '16 at 14:50
Bootstrap responsive tabs: https://onaircode.com/bootstrap-responsive-tabs-collection/ — Pacific P. Regmi, Aug 28 '17 at 10:10

score 673 · Accepted Answer · edited Jan 25 '21 at 15:52

673

Here is my solution to the problem, a bit late perhaps. But it could maybe help others:

// Javascript to enable link to tab
var hash = location.hash.replace(/^#/, '');  // ^ means starting, meaning only match the first hash
if (hash) {
    $('.nav-tabs a[href="#' + hash + '"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash;
})

edited Jan 25 '21 at 15:52

Luke Madhanga

6,871
2
43
47

answered Feb 22 '12 at 11:18

dubbe

7,068
1
16
18

97

I'd add 1 more extra line `window.scrollTo(0, 0);` to make sure the Window always scroll to the top – Trung Lê Apr 23 '12 at 21:27
This works great in Chrome, but for some reason the ScrollTo doesn't work in Firefox, any ideas? – Bill Leeper Apr 27 '12 at 02:24
is this also a way to make the search engines index the tabs as in mydomain.com/#mypage1 ,mydomain.com/#mypage2 and would this be SEO wise a better solution – alex Apr 18 '13 at 11:49
I don't think google indexes anchor links. But it is possible by adding a exclamation-mark. mydomain.com/#!mypage1, google will then index the link as mydoman.com/?_escaped_fragment_?=mypage1. So some sort of handling of that is needed. – dubbe Apr 19 '13 at 06:35
1

$('.nav-tabs a[href*=#'+url.split('#')[1]+']').tab('show') ; // With an * is safer since it otherwise it only matches the first #... – mattangriffel Jul 03 '13 at 23:00
can someone please edit to add coinciding HTML code? there seems to be no place on the web which shows a COMPLETE example with correct JS and HTML. – Jake Berger Jul 16 '13 at 15:21
1

Online that worked for me: window.location.hash && $('li a[href="' + window.location.hash+ '"]').tab('show').trigger("click"); – Dean Meehan Feb 28 '14 at 12:37
10

Here's a demo for Bootstrap 3: http://www.bootply.com/render/VQqzOawoYc#tab2 and the [source code](http://www.bootply.com/VQqzOawoYc) – Carol Skelly May 13 '14 at 14:06
For me the various alternatives I tried from this answer worked, but had the undesired side affect of also expanding a group button within the tab content pane. Haven't figured out why yet. – Jacques Aug 04 '14 at 10:09
('.nav-tabs a').on('shown' change 'shown' to 'click" and it works with changing the tabs. – Erik Larsson Oct 02 '14 at 12:38
1

As note writing that this code has to be within a document ready function or after the DOM is generated. – keithhackbarth Feb 19 '15 at 21:51
See my comment below if you also want to prevent scrolling! – Demircan Celebi Aug 03 '15 at 12:45
I copy and pasted @dubbe 's code above directly into my web application and it is working 100% no modifications! – dane Oct 30 '15 at 13:02
1

Accessing the hash this way results in a security exploit. If a malicious user injects javascript into the hash string and you don't sanitize it here, it will allow them to execute arbitrary code. Consider this a warning to strip the hash information before using it! – jaypb Nov 18 '15 at 23:31
2

After upgrade jquery to 1.11 from 1.09 I get this error: `Syntax error, unrecognized expression: .nav-tabs a[href=#tab-2]`. Solved using http://stackoverflow.com/questions/12131273/twitter-bootstrap-tabs-url-doesnt-change – Pietro Z. Jan 31 '16 at 11:11
you just saved me a lot of time :) tnkx – victorkurauchi Feb 05 '16 at 00:48
Upgrading to jquery 2.2 breaks this, but as explained at https://github.com/jquery/jquery/issues/2885 you should escape the # eg `a[href=\\#tab_blah]` – MrDBA Jul 12 '16 at 06:24
1

if i use the above code i get console error "hash undefined". what should the has be defined as... – Gavin Wood Dec 03 '16 at 18:24
How come for the page loading part, you `split` the url on `'#'`, but on the tab clicking part you just use `window.hash`? Couldn't `window.hash` be used in both instances? – AnalogWeapon Jan 20 '17 at 17:15
AnalogWeapon: It's four year since I wrote this answer. But I am guessing you are absolutely correct. window.hash could probably be used on both places. – dubbe Jan 25 '17 at 08:27
to prevent jumping https://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document – Amr Elgarhy Jun 01 '17 at 00:36
See my answer to prevent scrolling: https://stackoverflow.com/a/17552459/1778395 – Demircan Celebi Mar 30 '20 at 03:15

score 216 · Answer 2 · edited May 23 '17 at 12:10

216

UPDATE

For Bootstrap 3, change .on('shown', ...) to .on('shown.bs.tab', ....)

This is based off of @dubbe answer and this SO accepted answer. It handles the issue with window.scrollTo(0,0) not working correctly. The problem is that when you replace the url hash on tab shown, the browser will scroll to that hash since its an element on the page. To get around this, add a prefix so the hash doesn't reference an actual page element

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Example of use

If you have tab-pane with id="mytab" you need to put your link like this:

<a href="yoursite.com/#tab_mytab">Go to Specific Tab </a>

edited May 23 '17 at 12:10

Community

1
1

answered May 28 '12 at 16:30

flynfish

5,857
3
24
33

1

Would there be a simple way to reference bookmarks which are located under a specific tab? I have five tabs on my page, and under those I have a number of bookmarks. What I would like is to make these bookmarks linkable from outside the tab. – nize Dec 18 '13 at 08:46
@nize if you create a jsfiddle with what you are trying to do I will try to take a look. – flynfish Dec 24 '13 at 02:35
1

Here's a Bootlpy demo for Bootstrap 3: http://www.bootply.com/render/VQqzOawoYc#tab2 and the [source code](http://www.bootply.com/VQqzOawoYc) – Carol Skelly May 13 '14 at 14:08
The example above is missing the double quotes on the href. line 5 should be: `$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');` – Ponyboy Jun 23 '16 at 15:49
Works for me except that I had to remove the last forward slash (before the #) in 'yoursite.com/anotherpage/#tab_mytab' otherwise it played havoc with the page loading. – May 11 '18 at 06:12
Just to explain the "put your link like this" part: this is referring to a link on *another* page that you want to link to the page with the tags. It does NOT refer to the `nav-tabs` links. Those remain with the same hash. – timetofly Dec 19 '19 at 22:17

score 59 · Answer 3 · edited Feb 14 '15 at 11:16

59

you could trigger a click event on the corresponding tab link:

$(document).ready(function(){

  if(window.location.hash != "") {
      $('a[href="' + window.location.hash + '"]').click()
  }

});

edited Feb 14 '15 at 11:16

aksu

5,221
5
24
39

answered Oct 22 '11 at 20:34

Marian Theisen

6,100
29
39

Thanks for the tip! This worked great with one small problem. Refreshing the page, would not take it to the correct tab. Hitting Ctrl+F5 would. I modified the code to the following: ` $(document).ready(function(){ function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } var action = getUrlVars()["action"]; if (action != "") { $('a[href="#' + action + '"]').click() }; }); ` – mraliks Oct 23 '11 at 00:31

score 47 · Answer 4 · edited Jun 16 '16 at 08:45

This is an improved implementation of dubbe's solution which prevent scrolling.

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
} 

// With HTML5 history API, we can easily prevent scrolling!
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    if(history.pushState) {
        history.pushState(null, null, e.target.hash); 
    } else {
        window.location.hash = e.target.hash; //Polyfill for old browsers
    }
})

score 24 · Answer 5 · answered Feb 25 '12 at 04:13

24

While the JavaScript solution provided may work, I went a slightly different way that requires no additional JavaScript, but does require logic in your view. You create a link with a standard URL parameter, like:

<a href = "http://link.to.yourpage?activeTab=home">My Link</a>

Then you simply detect the value of activeTab to write 'class="active"' in the appropriate <li>

Pseudocode (implement accordingly in your language). Note I've set 'home' tab as a default active if no parameter provided in this example.

$activetabhome = (params.activeTab is null or params.activeTab == 'home') ? 'class="active"' : '';
$activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';

<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

answered Feb 25 '12 at 04:13

Peter

29,498
21
89
122

1

I prefer your solution to the JS solution due to one simple reason is that JS location.hash would jump to the ID which cause the position of the cursor goes up and down. – Trung Lê Apr 23 '12 at 07:00
1

I prefer this solution. In fact, i created new routes for tabs and re-generated view by setting active class accordingly. This avoids headache of page resize, url hash and page scrolling all together. – Vijay Meena Jul 20 '16 at 05:21
A better solution. – HappyCoder Apr 15 '22 at 17:00

score 11 · Answer 6 · answered Jan 17 '14 at 12:09

I am not a big fan of if...else; so I took a simpler approach.

$(document).ready(function(event) {
    $('ul.nav.nav-tabs a:first').tab('show'); // Select first tab
    $('ul.nav.nav-tabs a[href="'+ window.location.hash+ '"]').tab('show'); // Select tab by name if provided in location hash
    $('ul.nav.nav-tabs a[data-toggle="tab"]').on('shown', function (event) {    // Update the location hash to current tab
        window.location.hash= event.target.hash;
    })
});

Pick a default tab (usually the first)
Switch to tab (if such an element is indeed present; let jQuery handle it); Nothing happens if a wrong hash is specified
[Optional] Update the hash if another tab is manually chosen

Doesn't address scrolling to requested hash; but should it?

score 10 · Answer 7 · answered Apr 15 '15 at 03:49

10

For Bootstrap 3:

$('.nav-tabs a[href="#' + tabID + '"]').tab('show');

https://jsfiddle.net/DTcHh/6638/

answered Apr 15 '15 at 03:49

Razan Paul

13,618
3
69
61

greggdavis · Answer 8 · 2013-09-05T12:38:45.640

This works in Bootstrap 3 and improves dubbe and flynfish 's 2 top answers by integrating GarciaWebDev 's answer as well (which allows for url parameters after the hash and is straight from Bootstrap authors on the github issue tracker):

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";

if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('.nav-tabs a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

this doesn't work in Bootstrap 3, `'shown'` should be `'shown.bs.tab'` per the docs: http://getbootstrap.com/javascript/#tabs-events. I'm baffled as to why but when I tried to edit your post it got rejected... — YPCrumble, Aug 05 '15 at 23:18

score 8 · Answer 9 · edited Jan 25 '19 at 18:27

Building on Demircan Celebi's solution; I wanted the tab to open when modifying the url and open tab without having to reload the page from the server.

<script type="text/javascript">
    $(function() {
        openTabHash(); // for the initial page load
        window.addEventListener("hashchange", openTabHash, false); // for later changes to url
    });


    function openTabHash()
    {
        console.log('openTabHash');
        // Javascript to enable link to tab
        var url = document.location.toString();
        if (url.match('#')) {
            $('.nav-tabs a[href="#'+url.split('#')[1]+'"]').tab('show') ;
        } 

        // With HTML5 history API, we can easily prevent scrolling!
        $('.nav-tabs a').on('shown.bs.tab', function (e) {
            if(history.pushState) {
                history.pushState(null, null, e.target.hash); 
            } else {
                window.location.hash = e.target.hash; //Polyfill for old browsers
            }
        })
    }
</script>

score 7 · Answer 10 · answered Apr 04 '19 at 07:41

Just insert this code on your page:

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

score 6 · Answer 11 · answered Nov 15 '12 at 12:34

This code selects the right tab depending on the #hash and adds the right #hash when a tab is clicked. (this uses jquery)

In Coffeescript :

$(document).ready ->
    if location.hash != ''
        $('a[href="'+location.hash+'"]').tab('show')

    $('a[data-toggle="tab"]').on 'shown', (e) ->
        location.hash = $(e.target).attr('href').substr(1)

or in JS :

$(document).ready(function() {
    if (location.hash !== '') $('a[href="' + location.hash + '"]').tab('show');
    return $('a[data-toggle="tab"]').on('shown', function(e) {
      return location.hash = $(e.target).attr('href').substr(1);
    });
});

make sure to put this after jquery has loaded. I was putting it in the middle of a page (it was an easy place to insert it for testing) and it did not work. Putting it after I load jquery works great. — Ron, Jun 28 '15 at 18:42

score 5 · Answer 12 · answered Aug 10 '12 at 09:55

5

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

This code from http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 worked for me perfectly.

answered Aug 10 '12 at 09:55

tomaszbak

8,247
4
44
37

score 5 · Answer 13 · answered Feb 25 '13 at 04:34

@flynfish + @Ztyx solution that I use for nested tabs:

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

childrens should have class="nested"

Can you explain while you have / in hashes? – Dario de Judicibus Feb 05 '22 at 19:47 — Dario de Judicibus, Feb 05 '22 at 19:47

score 5 · Answer 14 · edited Jan 21 '20 at 15:57

I came up with a solution that uses the url hash or localStorage depending on the availability of the latter with below code:

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});

score 4 · Answer 15 · edited Aug 28 '13 at 13:14

4

I would suggest you use the code provided by Bootstrap authors on their issue tracker on GitHub:

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

You can find on the link to the issue more information about why they didn't choose to support that.

edited Aug 28 '13 at 13:14

seemly

1,090
10
20

answered Oct 16 '12 at 21:45

Alejandro García Iglesias

16,222
11
51
64

score 4 · Answer 16 · answered Jan 29 '16 at 05:57

Tried couple of ways discussed above and end up with following working solution, just copy and paste in your editor to try. To test just change hash to inbox, outbox, compose in url and hit enter key.

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

Hope this will save your time.

score 3 · Answer 17 · answered Jan 19 '13 at 14:13

Here is what i did, really simple, and provided your tab links have an ID associated with them you can get the href attribute and pass that over to the function that shows the tab contents:

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

Then in your url you can add the hash as something like: #tab_tab1, the 'tab_' part is removed from the hash itself so the ID of the actual tab link in the nav-tabs (tabid1) is placed after this, so your url would look something like: www.mydomain.com/index.php#tab_tabid1.

This works perfect for me and hope it helps someone else :-)

score 3 · Answer 18 · edited Apr 27 '22 at 16:06

If it matters to anybody, the following code is small and works flawless, to get a single hash value from the URL and show that:

<script>
    window.onload = function () {
        let url = document.location.toString();
        let splitHash = url.split("#");
        if (splitHash[1]) {document.getElementById(splitHash[1]).click();}
    };
</script>

what it does is it retrieves the id and fires the click event. Simple.

score 2 · Answer 19 · answered Feb 06 '13 at 10:51

I just had this issue, but needed to handle multiple tab levels. The code is rather ugly (see comments), but does its job: https://gist.github.com/JensRantil/4721860 Hopefully someone else will find it useful (and feel free to propose better solutions!).

score 2 · Answer 20 · answered Jul 14 '13 at 00:36

This is my solution to handle nested tabs. I just added a function to check if the active tab has a parent tab to be activated. This is the function:

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

And can be called like this (Based on @flynfish's solution):

var hash = document.location.hash;
var prefix = "";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
    activateParentTab(hash);
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

This solution works pretty fine to me at the moment. Hope this can be useful for someone else ;)

score 2 · Answer 21 · answered Jan 23 '15 at 14:25

I had to modify some bits for this to work for me. I am using Bootstrap 3 and jQuery 2

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Great answer, except I had to replace the "!" prefix with "tab_". Otherwise worked perfectly. — koziez, Apr 08 '15 at 19:40

score 1 · Answer 22 · answered Jan 15 '16 at 19:50

1

Combining peices from other answers, here is a solution that can open many levels of nested tabs:

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}

answered Jan 15 '16 at 19:50

cweston

11,297
19
82
107

only works to 2 levels of nesting, the 3rd level causes problems. – Nicholas Hamilton Feb 22 '16 at 12:25
I just tested this against three level of tabs, and it appears to be working for me. Are you sure this isn't an issue with your implementation? What "problem" are you experiencing? – cweston Feb 22 '16 at 16:35
Any tab in 1st level and 2nd level works fine, however, in the 3rd level, when refreshing the page (or submitting the form), when the page re-opens, it focus is given to the first tab on the 2nd level. – Nicholas Hamilton Feb 22 '16 at 23:36
So got it working ok (there was a minor typo in my code), however after the typo correction, only with `$('.nav-tabs li a').click( function(e) { history.pushState( null, null, $(this).attr('href') );});` in the javascript above your code. – Nicholas Hamilton Feb 23 '16 at 09:19

score 1 · Answer 23 · answered Nov 28 '22 at 10:09

For Bootstrap 5.1 for redirecting to specific tab

var hash = location.hash.replace(/^#/, '');
if (hash) {
var someVarName = $('.nav-tabs a[href="#' + hash + '"]');
var tab = new bootstrap.Tab(someVarName);
tab.show();
}

Change hash for page-reload

$('.nav-tabs a').on('shown.bs.tab', function (e) {
  window.location.hash = e.target.hash;
  window.scrollTo(0, 0);
})

score 0 · Answer 24 · answered Mar 05 '18 at 09:38

I make sth like this for links with ajax #!# (e.g./test.com#!#test3) but you can modify it whatever you like

$(document).ready(function() {

       let hash = document.location.hash;
       let prefix = "!#";

       //change hash url on page reload
       if (hash) {
         $('.nav-tabs a[href=\"'+hash.replace(prefix,"")+'\"]').tab('show');
       } 

       // change hash url on switch tab
       $('.nav-tabs a').on('shown.bs.tab', function (e) {
          window.location.hash = e.target.hash.replace("#", "#" + prefix);
       });
 });

Example with simple page on Github here

score 0 · Answer 25 · answered May 07 '19 at 20:07

I know this thread is very old, but I'll leave here my own implementation:

$(function () {
  // some initialization code

  addTabBehavior()
})

// Initialize events and change tab on first page load.
function addTabBehavior() {
  $('.nav-tabs a').on('show.bs.tab', e => {
    window.location.hash = e.target.hash.replace('nav-', '')
  })

  $(window).on('popstate', e => {
    changeTab()
  })

  changeTab()
}

// Change the current tab and URL hash; if don't have any hash
// in URL, so activate the first tab and update the URL hash.
function changeTab() {
  const hash = getUrlHash()

  if (hash) {
    $(`.nav-tabs a[href="#nav-${hash}"]`).tab('show')
  } else {
    $('.nav-tabs a').first().tab('show')
  }
}

// Get the hash from URL. Ex: www.example.com/#tab1
function getUrlHash() {
  return window.location.hash.slice(1)
}

Note that I'm using a nav- class prefix to nav links.

score 0 · Answer 26 · answered Jun 22 '22 at 15:19

Building on Peter's answer, and incorporating https://stackoverflow.com/a/901144/1604205, here's the code in JS:

<script>
    const params = new Proxy(new URLSearchParams(window.location.search), {
        get: (searchParams, prop) => searchParams.get(prop),
    });
    $activetabhome = (params.activeTab === null || params.activeTab == 'home') ? 'class="active"' : '';
    $activetabprofile = (params.activeTab == 'profile') ? 'class="active"' : '';
</script>
<li $activetabhome><a href="#home">Home</a></li>
<li $activetabprofile><a href="#profile">Profile</a></li>

Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

26 Answers26

Linked

Related