在頁面重新加載后保持活動標簽時加載 ajax 內容（引導程序 4）

Question

我創建了一個包含許多選項卡的頁面 為了在第一次顯示時不減慢頁面的加載速度，我只有在單擊時才能獲取選項卡的內容

然后我將其設置為保存最后一個活動選項卡：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    localStorage.setItem('activeTab', $(e.target).attr('href'));
});

var activeTab = localStorage.getItem('activeTab');
if(activeTab){
    $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
}

效果很好，當我重新加載頁面時，我會很好地落在最后訪問的選項卡上

但問題是，它不會加載 Ajax 內容（甚至是簡單的警報）

演示： https : //jsfiddle.net/ak37besp/1/

如何到達使用的最后一個選項卡，然后加載相應的 Ajax ？

Answer 1

您的代碼中的問題在於，您沒有在重新加載頁面后調用任何加載 ajax 內容的函數，您只是在設置活動選項卡。

為此，請在您的代碼中創建一個名為loadTabContent(tab)的函數，該函數將選項卡 ID 作為參數並加載 ajax 內容：

function loadTabContent(tab) {
    if (tab == '#tab2'){
    alert("ajax loaded tab2");
    //load ajax content for tab 2 here
  }
}

然后在從 localStorage 檢查和設置活動選項卡時，調用創建的函數：

// read hash from page load and change tab
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
  $('.nav-tabs a[href="' + activeTab + '"]').tab('show');
  loadTabContent(activeTab);
}

這是一個演示鏈接： https : //jsfiddle.net/1mfqwgpz/3/