javascript - 在页面重新加载后保持活动选项卡时加载 ajax 内容(Bootstrap 4)
问题描述
我创建了一个包含许多选项卡的页面为了在第一次显示期间不减慢页面的加载速度,只有当我们单击它时我才会获取选项卡的内容
然后我将其设置为保存最后一个活动选项卡:
$('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?
解决方案
您的代码中的问题是您在重新加载页面后没有调用任何加载 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/
推荐阅读
- python - 如何在下面的代码中将 CSV 文件作为输入参数
- python - 如何获取与其值列表的子集匹配的键列表
- javascript - 向 javascript 的 Array 类添加自定义函数会破坏数组声明
- xamarin.ios - MVVMCross 和 Xamarin.ios - 将菜单锚定到上一个视图按钮
- oracle - APEX ORACLE - 将多个参数插入到从顶点到数据库表的多个列中
- python - Python 检查嵌套 JSON 键值是否存在
- django - Django 翻译解析顺序
- robotframework - 是否可以覆盖机器人中的列表变量?
- python - pymysql.err.InternalError:(1327,'未声明的变量:无')
- clojure - 如何有条件地生成打嗝结构?