首页 文章

深层链接基础5选项卡

提问于
浏览 次
1

Update

截至v5.5.1基础标签支持深层链接 .

深度链接不适用于Foundation 5选项卡，所以我试图在hack上工作 .

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

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

console.log 显示正确的哈希，但"click"似乎不起作用 .

我想知道任何允许我深入链接Foundation 5选项卡的变通方法或黑客 .

javascript jquery tabs zurb-foundation deep-linking

3 回答

  • 4

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

    回复于
  • 3

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

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

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

    $(document).foundation({
    tab: {
        deep_linking:true,
        scroll_to_content: false
    }
});
    回复于
  • 3

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

    来自docs：

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

    回复于

相关问题