Menu icon Foundation
Deep linking no longer working for Tabs

I'm trying to implement deep linking with Foundation's tabs - but it looks like it's not working in the actual Docs. I tried Safari and Chrome:

http://foundation.zurb.com/docs/components/tabs.html

Clicking the tab in the deep linking example doesn't add any hash link to the url and manually appending it doesn't make the browser jump to it.

Is this broken?

tabsdeep linkinghash link

I'm trying to implement deep linking with Foundation's tabs - but it looks like it's not working in the actual Docs. I tried Safari and Chrome:

http://foundation.zurb.com/docs/components/tabs.html

Clicking the tab in the deep linking example doesn't add any hash link to the url and manually appending it doesn't make the browser jump to it.

Is this broken?

Rafi Benkual almost 5 years ago

I am seeing the issue with the docs example. Upon deploy the deep_linking: true; data option is being converted to a deep-linking. Although deep linking is working correctly in my local copy.

Example code:

<ul class="tabs" data-tab data-options="deep_linking: true">
  <li class="tab-title active"><a href="#tabs-deeplink-1">Tab 1</a></li>
  <li class="tab-title active"><a href="#tabs-deeplink-2">Tab 2</a></li>
  <li class="tab-title active"><a href="#tabs-deeplink-3">Tab 3</a></li>
</ul>
<div class="tabs-content">
  <section id="tabs-deeplink-1" role="tabpanel" aria-hidden="false" class="content active">
    <h2>First Panel Header</h2>
    <p id="tabs-deeplink-content-1">First panel content goes here...</p>
  </section>
  <section id="tabs-deeplink-2"role="tabpanel" aria-hidden="true" class="content" >
    <h2>Second Panel Header</h2>
    <p id="tabs-deeplink-content-2"> Second panel content goes here...</p>
  </section>
  <section id="tabs-deeplink-3"role="tabpanel" aria-hidden="true" class="content" >
    <h2>Third Panel Header</h2>
    <p id="tabs-deeplink-content-3"> Third panel content goes here...</p>
  </section>
</div>

Teague Camarigg over 2 years ago

For those who have not updated to F6 this may help as well.

We use jquery v220 and experienced this error when deep linking:

Uncaught Error: Syntax error, unrecognized expression: [data-tab] > * > a[href=#report]

 

We learned it was because jquery needed to interpret the # as a literal in order to work with the foundation code.

 

After testing a few things, here is our modification that fixed it (Foundation v5.5.3):

Go to foundation.tab.js

On lines 105,111,117 make the corresponding changes:

Simply add the literal slashes before the hash value for the href

 

if (hash_element.hasClass('content') && hash_element.parent().hasClass('tabs-content')) {
    // Tab content div
    self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=\\' + hash + ']').parent());
}



if (hash_tab_container_id != undefined) {
    self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=\\#' + hash_tab_container_id + ']').parent(), hash);
}



for (var ind = 0; ind < self.default_tab_hashes.length; ind++) {
    self.toggle_active_tab($('[' + self.attr_name() + '] > * > a[href=\\' + self.default_tab_hashes[ind] + ']').parent());
}

 

This worked for us, your context may be different but it is simple enough to try.