Linking to specific tab

[Gavrisimo]

Hello,

am i missing something or the only way to link to a specific tab is by setting .active class to tab navigation and .tab-pane elements?

For example, i lets look at demo of this tab system:

http://twitter.github.com/bootstrap/javascript.html#tabs

It has two links with href attributes set on #home and #profile which are targeting elements with those IDs and showing them accordingly. So everything is fine there, but what if i want to link to #profile tab from another page? Maybe I am missing something really obvious, but it seems that this is not possible simply by appending #profile to page url?

Like i said, i might have missed something, but if I did not, it would be absolutely great if this could be implemented in bootstrap!

Thanks.

[pokonski]

You'd have to check the window.location.hash for the hash and switch the tabs yourself. bootstrap-tabs.js does not provide such functionality.

IIRC @fat said he does not want to mess with URLs and hashes. Which is understandable, as it's too much work for what it offers.

[Gavrisimo]

I understand that, but as far as I know almost every "tab plugin" out there offers this functionality, i.e. you can link to specific tab from other page.

I think this is the only functionality that is missing from bootstrap-tabs.js which would round it up to really, really useful plugin. :)

[BenjiZombie]

What you could do is is have a script run the first time your page is loaded and have this script switch to the tab according to the hash in the URI:

$(function() {
    var hash = window.location.hash;

    // do some validation on the hash here

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

The last line selects the tab which points to the tab-pane and makes it visible, like manually clicking on the tab header yourself.

[fat]

@Gavrisimo jquery-ui has done a really simple implementation which essentially checks for location.hash, if it's present sets the active tab. However, this doesn't work with history or the back button (which get really messy - there's even a note about it in jquery-ui docs). Anyways, rather then confuse our users into thinking we support this feature, we've just opted out of supporting it altogether.

That said, if you're ok with the jquery-ui implementation, it's really easy, just do this:

$(function () {
   var activeTab = $('[href=' + location.hash + ']');
   activeTab && activeTab.tab('show');
});

[Gavrisimo]

Thanks @fat !

[jdrake]

Just to add a small addition, to deal with querystring parameters:

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

[kumekay]

Thanks, @jdrake !

[lukebrowell]

This is great but doesn't work when you have an inline link to a tab from within another tab.

To compound matters, browsers do not trigger onready when following hash anchors.

To fix this we have to override the link behaviour when links contain hashes, to trigger a variation of @jdrake's solution thus:

    var gotoHashTab = function (customHash) {
        var hash = customHash || location.hash;
        var hashPieces = hash.split('?'),
            activeTab = $('[href=' + hashPieces[0] + ']');
        activeTab && activeTab.tab('show');
    }

    // onready go to the tab requested in the page hash
    gotoHashTab();

    // when the nav item is selected update the page hash
    $('.nav a').on('shown', function (e) {
        window.location.hash = e.target.hash;
    })

    // when a link within a tab is clicked, go to the tab requested
    $('.tab-pane a').click(function (event) {
        if (event.target.hash) {
            gotoHashTab(event.target.hash);
        }
    });

[JensRantil]

There's a Stack Overflow discussion about the same issue here: http://stackoverflow.com/questions/7862233/twitter-bootstrap-tabs-go-to-specific-tab-on-page-reload

Also, I've posted a solution that deals with nested tabs here: https://gist.github.com/JensRantil/4721860

[florianm]

Hi,

thanks for the fix, works a treat for me!
But what if I want to make the page show the referenced tab, but avoid the page to scroll to the tab?
It took me such an embarassingly long time to figure out that I had to override the "shown" event which is fired after a tab is shown ( http://twitter.github.io/bootstrap/javascript.html#tabs ) that I wanted to share this solution here.

Behaviour:
I've got a page with a few twitter-botstrap nav tabs with ids like "#mytab1", "#mytab2" and so on.
There are a few divs above the nav tabs, which are important for the page context. The user needs to have them in plain view on page load.
I want incoming links like url/to/page/#mytab1 to open, but NOT to scroll to the respective tab, but to show the divs above (for context).

Solution:

1 $(function () { var a = $('[href=' + location.hash + ']'); a && a.tab('show'); });
2 $('.nav a').on('shown', function (e) { window.location = "#top"; })

Line 1 makes incoming links activate and scroll to that tab, as described by @fat earlier in this thread.
Line 2 makes the page subsequently scroll to the top - actually, to a blank link with id 'top' embedded in the beginning of the body:

<a href="" id="top"></a>

Hope this helps!

[acalandi]

@florianm Line one works for me to open the tab, but line two does not, it still scrolls down when the tab loads.
Your script for the tab showing was the only one I could get to work, so hopefully you can help with the scrolling issue.
Thanks!

[florianm]

@acalandi Hm, strange, it should work.

In a JS console on your respective page (scrolled down a bit), will

window.location="#top"

jump you up to the top?

If you "inspect" the nav tab, you should find the event listener "shown".

My line 2 simply tacks the anonymous function that jumps you to "#top" onto the event listener "shown" of any HTML link that is nested within a nav class element ('.nav a') which fires right after someone (or a URL link) selects that respective tab.

[amarkitanis]

@florianm
rather than adding an additional div in your html, you can just invoke scrollTo(0,0)

this is what I'm using:

return $('a[data-toggle="tab"]').on('shown', function(e) {
location.hash = $(e.target).attr('href').substr(1);
scrollTo(0,0);
});

[TheZoker]

Do anybody know, how I can set, that when chaning the tab, the url in browser does also change?

So when I click on "Tab1" then the url is site.com/#tab1

Thank you :)

[carasmo]

http://jsbin.com/IWIKenIn/1/edit?html,css,js,output

http://jsbin.com/IWIKenIn/1/

[TheZoker]

Thank you for your answere, but it does not work on my site:
http://ts.zoker.me/

Im just a javascript beginer, so it may be a error in code ...