深度鏈接基礎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”。