深度链接基础5个选项卡

Question

更新资料

从v5.5.1开始， Foundation Tabs支持深度链接。

---

深层链接不适用于Foundation 5 Tabs，因此我正在尝试进行修改。

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

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

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

我想知道任何允许我深入链接Foundation 5 Tabs的变通办法或黑客技巧。

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中进行“深层链接”选项卡的解决方案。

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

参考可以在这里找到。

Answer 3

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

从文档 ：

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