Deep Linking Foundation 5 Tabs

Update As of v5.5.1 Foundation Tabs support deep linking. Deep linking doesn't work with Foundation 5 Tabs so I am attempting to work on a hack. My thought is to use jQuery to tr

Solution 1:

You can also set this via JS in the Foundation init:

$(document).foundation({
    tab: {
        deep_linking:true       
    }
});

And if you don't want the page to scroll to the newly selected tab, you can do this:

$(document).foundation({
    tab: {
        deep_linking:true,
        scroll_to_content: false
    }
});

Solution 2:

This is now supported as standard by Foundation 5 via the attribute data-options="deep_linking:true"

From the docs:

The tabs Foundation component can parse the location hash value and open the corresponding tab content pane. To enable deep linking set data-options="deep_linking:true". If the location hash maps to an element ID within a tab content pane, then the appropriate tab will become active and the browser window will scroll to the specified element. If you do not want to scroll to the specified element then set data-options="scroll_to_content: false".

Solution 3:

This was the solution to how to Deep Link Tabs in Foundation 5.

if(window.location.hash){
    $('dl.tabs dd a').each(function(){
        var hash = '#' + $(this).attr('href').split('#')[1];
        if(hash == window.location.hash){
            $(this).click();
        }
    });         
}

Reference can be found here.