在页面重新加载后保持活动选项卡时加载 ajax 内容（引导 4）

Posted 2023-05-08

【中文标题】在页面重新加载后保持活动选项卡时加载 ajax 内容（引导 4）

【英文标题】：Load ajax content when keep active tab after page reload (Bootstrap 4)

【发布时间】：2020-04-02 10:50:08

【问题描述】：

我创建了一个包含许多选项卡的页面 为了在第一次显示期间不减慢页面的加载速度，我只有在我们点击时才能获取选项卡的内容

然后我将其设置为保存最后一个活动标签：

$('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？

【参考方案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/