深层链接基础5表

Question

更新

对于v5.5.1基金会，Tabs支持深度链接。

深层链接不适用于Foundation5Tabs，所以我尝试进行黑客攻击。

我的想法是使用jQuery来触发对适当选项卡的单击，但它不起作用。

var hash = window.location.hash;
$(function() {
  $(window).on('load', function () {
    $(hash).trigger( "click" );
    console.log(hash)
  });
});

console.log显示正确的散列，但“单击”似乎不起作用。

我想知道任何的解决办法或黑客，让我深入链接基金会5表。

Answer 1

这现在被基金会5通过属性data-options="deep_linking:true"支持为标准

来自文档

选项卡基础组件可以解析位置哈希值并打开相应的选项卡内容窗格。要启用深度链接集数据-选项=“deep_linking:true”。如果位置散列映射到选项卡内容窗格中的元素ID，则相应的选项卡将处于活动状态，浏览器窗口将滚动到指定的元素。如果不想滚动到指定的元素，那么设置data=“scroll_to_content: false”。

Answer 2

您还可以在Foundation init中通过JS设置它：

$(document).foundation({
    tab: {
        deep_linking:true       
    }
});

如果不希望页面滚动到新选定的选项卡，则可以这样做：

$(document).foundation({
    tab: {
        deep_linking:true,
        scroll_to_content: false
    }
});

Answer 3

这是如何在Foundation5中实现深度链接表的解决方案。

if(window.location.hash){
    $('dl.tabs dd a').each(function(){
        var hash = '#' + $(this).attr('href').split('#')[1];
        if(hash == window.location.hash){
            $(this).click();
        }
    });         
}

参考资料可在这里找到。