Question

Apparently deep linking in Zurb Foundation has been removed, so linking to tabs from other places on a site isn’t possible natively. I’m hoping someone can help me with a workaround?

Here’s my HTML code for the tabs:

<dl class="tabs">
    <dd class="active"><a href="#one">Tab 1</a></dd>
    <dd><a href="#two">Tab 2</a></dd>
    <dd><a href="#three">Tab 3</a></dd>
    <dd><a href="#four">Tab 4</a></dd>
</dl>

And for the tab content:

<ul class="tabs-content">
    <li id="oneTab" class="active">
        [content]
    </li>

    <li id="twoTab">
        [content]
    </li>

    <li id="threeTab">
        [content]
    </li>

    <li id="fourTab">
        [content]
    </li>


</ul>

The URLs I’ve tried to link to the tab (which reside in the footer of the site):

http://domain.com/path/to/page#four
http://domain.com/path/to/page#fourTab

Answer 1

Deep linking was set as a default parameter in 3.2.3. If you download the latest version, 3.2.4, your deep linking should work fine.

In case you don’t want to update all of Foundation (although I recommend you keep up to date) to the latest version, you can just download the latest version of Tabs from the repository: jquery.foundation.tabs.js and replace the old tabs with this one.

In, 3.2.4, if you want to disable deep linking you have to explicitly set deep_linking to false when you initialize the plugin.

$(document).foundationTabs({deep_linking: false});