最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Deep Linking Foundation 5 Tabs - Stack Overflow

programmeradmin0浏览0评论

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.

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.

Share Improve this question edited Jun 9, 2015 at 15:43 L84 asked Jan 3, 2014 at 0:48 L84L84 46.3k59 gold badges181 silver badges259 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

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

This is now supported as standard by Foundation 5 via the attribute data-options="deep_linking:true"

From the docs:

The tabs Foundation ponent 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 bee 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".

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.

发布评论

评论列表(0)

  1. 暂无评论