Menu icon Foundation
Deeplinking tabs - hashtag not visible in URL

I just copied the deep linking code from foundations docs site page to test. Tabs work fine, but deep linking is not working because the #panelx is not appearing in the browsers URL.

When I test te tabs in de example page at foundation site, it is working.

I'm at a loss. Please advice?

Thank you,

 

Hans 

<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
  <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4d">Tab 4</a></li>
</ul>

<div class="tabs-content" data-tabs-content="deeplinked-tabs">
  <div class="tabs-panel is-active" id="panel1d">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="tabs-panel" id="panel2d">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel3d">
    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
  </div>
  <div class="tabs-panel" id="panel4d">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

tabsdeep linkinghashtag

I just copied the deep linking code from foundations docs site page to test. Tabs work fine, but deep linking is not working because the #panelx is not appearing in the browsers URL.

When I test te tabs in de example page at foundation site, it is working.

I'm at a loss. Please advice?

Thank you,

 

Hans 

<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge="500" data-tabs id="deeplinked-tabs">
  <li class="tabs-title is-active"><a href="#panel1d" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2d">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3d">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4d">Tab 4</a></li>
</ul>

<div class="tabs-content" data-tabs-content="deeplinked-tabs">
  <div class="tabs-panel is-active" id="panel1d">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="tabs-panel" id="panel2d">
    <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
  </div>
  <div class="tabs-panel" id="panel3d">
    <img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
  </div>
  <div class="tabs-panel" id="panel4d">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>