Deep Linking Foundation 5 选项卡答案

【问题标题】：Deep Linking Foundation 5 TabsDeep Linking Foundation 5 选项卡
【发布时间】：2014-01-20 14:10:31
【问题描述】：

更新

截至v5.5.1 Foundation Tabs 支持深度链接。

深度链接不适用于 Foundation 5 选项卡，因此我正在尝试破解。

我的想法是使用 jQuery 触发对相应选项卡的点击，但它不起作用。

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

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

我想知道任何可以让我深度链接 Foundation 5 Tabs 的变通方法或技巧。

【问题讨论】：

标签： javascript jquery tabs zurb-foundation deep-linking

【解决方案1】：

您也可以在 Foundation init 中通过 JS 进行设置：

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

如果您不希望页面滚动到新选择的标签，您可以这样做：

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

【讨论】：

问题是你不能在拥有deep_linking的同时禁用scroll_to_content，无论你设置的是JS还是数据属性data-options="deep_linking:true;scroll_to_content: false"。 Github issue github.com/zurb/foundation/issues/4791 和 Trello 已知问题列表，您可以在其中投票 trello.com/c/FXTkqxPn/…

【解决方案2】：

Foundation 5 现在通过属性data-options="deep_linking:true" 将其作为标准支持

来自docs：

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

【讨论】：

【解决方案3】：

这是在 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.

【讨论】：