Foundation-sites: Foundation 6 - deep linking for tabs no documentation

[jnartey]

There is no documentation on deep linking for tabs in zurb foundation 6. How is deep linking done?

[zurbchris]

This feature is not yet implemented. If you would like to take a crack at it and submit a pr, I'd love to see it.

[tehlivi]

Waiting for this as well.

[jaysonbrown]

Mee too! ... I coded an entire site based on the assumption this function would be available.

[Giltvedt]

Me too! I need to use custom jQuery meanwhile.

[zerodahero]

Here's my workaround for it, jQuery style, in the meantime:

var link_tab = window.location.hash.substr(1);
if(link_tab){
    $('[data-tabs]').eq(0).foundation('selectTab', $('#'+link_tab));
}

[jaysonbrown]

I really need a solution today ... built an entire project on foundation 6, and now foundation 5 can no longer generate custom builds ... what do I do?!

[rafibomb]

We're adding this to our roadmap for this plugin in a future release. Thanks @zerodahero for providing your solution!

Some simple JS in the tab plugin to pay attention to anchor tags and anchor change events

We'd love a PR on this in the meantime - it is being added to the development roadmap which we'll be publishing within a week.

[jaysonbrown]

Looking forward to the deep-linking tabs coming back :)

[JTallis]

I'm waiting for this, too. My laziness kicks in and I'd rather wait for this to be released than to code a work-around. Especially seeing as anchors aren't even being set when you click tabs.

[jaysonbrown]

I really need this feature :(

[chrismacho]

Nothing yet? ughhhhhh

[jaysonbrown]

Hey @chrismacho ... it doesn't have callbacks, but (zerodahero fix) works for me.

// Hash tab

var link_tab = window.location.hash.substr(1);

if (link_tab) {

    $('[data-tabs]').eq(0).foundation('selectTab', $('#'+link_tab));

}

[jaysonbrown]

I really need to figure out callbacks, I use them too much in foundation 5. :(

[drivenfaroff]

var link_tab = window.location.hash.substr(1);

if (link_tab) {
$('[data-tabs]').eq(0).foundation('selectTab', $('#'+link_tab));
}

This works for opening/jumping to first instance of [data-tabs] on my page, however it doesn't recognize the hash for tabs in another [data-tabs] section. Any help or suggestions to get it to work with multiple tab areas on one page?

[ahebrank]

Here's a jQuery solution that should handle multiple tabsets on a page, open and jump to the proper tab at load (and adjust the scroll position of the page a little to show the tab header), and push the hash to the browser URL when a tab is clicked:

function tabDeepLink(selector) {
    $(selector).each(function() {
        var $tabs = $(this);

        // match page load anchor
        var anchor = window.location.hash;
        if (anchor.length && $tabs.find('[href="'+anchor+'"]').length) {
            $tabs.foundation('selectTab', $(anchor));
            // roll up a little to show the header
            var offset = $tabs.offset();
            $(window).load(function() {
                $('html, body').animate({ scrollTop: offset.top }, 300);
            });
        }

        // append the hash on click
        $tabs.on('change.zf.tabs', function() {
            var anchor = $tabs.find('.tabs-title.is-active a').attr('href');
            history.pushState({}, "", anchor);
        });
    });
}

// turn this on for all the tabs or a subset
tabDeepLink('.tabs');

[andycochran]

@ahebrank This is a great solution. Thanks. Would be even better if it worked with the back button. Any thoughts on implementing that?

[kball]

I'd like to get this in to 6.3. @ahebrank do you want to submit a pull request?

[jaysonbrown]

We need both the hash options, deep linking and tab callbacks ASAP.

It was in version 5 but was removed in version 6. I almost lost a client over this, my only resolution was to load both 5 & 6 together as a super hack.

This is why I can't have nice things.

[ahebrank]

The above was intended more as a workaround, but I'll take a look and see about a PR that fits into the framework.

[kball]

9242 has been merged addressing this. Great work @ahebrank!