Question

更新

从v5.5.1开始，基础标签支持深层链接。

深度链接不适用于Foundation 5标签，所以我试图处理黑客攻击。

我的想法是使用jQuery触发相应选项卡上的点击，但它无效。

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

console.log显示正确的哈希，但“点击”似乎不起作用。

我想知道任何允许我深入链接Foundation 5标签的变通方法或黑客。

Answer 1

你也可以在Foundation init中通过JS设置它：

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

如果您不希望页面滚动到新选择的标签，则可以执行以下操作：

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

Answer 2

这是如何在Foundation 5中使用Deep Link选项卡的解决方案。

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.

Answer 3

现在，基金会5通过属性data-options="deep_linking:true"

支持此标准

来自docs：

选项卡Foundation组件可以解析位置哈希值并打开相应的选项卡内容窗格。要启用深层链接，请设置data-options =“deep_linking：true”。如果位置哈希映射到选项卡内容窗格中的元素ID，则相应的选项卡将变为活动状态，浏览器窗口将滚动到指定的元素。如果您不想滚动到指定的元素，请设置data-options =“scroll_to_content：false”。

深层链接基础5选项卡

3 个答案: