Deep Linking Foundation 5 Tabs

Question

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 trigger a click on the appropriate tab but it isn't working.

var hash = window.location.hash;
$(function() {
  $(window).on('load', function () {
    $(hash).trigger( "click" );
    console.log(hash)
  });
});

The console.log shows the correct hash but the "click" doesn't appear to work.

I would like to know any workarounds or hacks that allow me deep link Foundation 5 Tabs.

Answer 1

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

Answer 2

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

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