javascript - 页面刷新后 HTML 保持在同一选项卡上
问题描述
我需要一种方法来保持在同一个选项卡上,这是我的 HTML 代码:
<button class="tablink" onclick="openPage('Customers', this, 'orange')" <a href="#Customers" data-toggle="pill">Customers</a></button>
<button class="tablink" onclick="openPage('Online', this, 'orange')" <a href="#Online" data-toggle="pill">Online Sessions</a></button>
<button class="tablink" onclick="openPage('History', this, 'orange')" <a href="#History" data-toggle="pill">Historical Sessions</a></button>
<div id="Customers" class="tabcontent">
我尝试了几种方法来做到这一点,但它们都不起作用,这是其中之一:
jQuery(document).ready(function() {
jQuery('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', jQuery(e.target).attr('href'));
});
var activeTab = localStorage.getItem('activeTab');
console.log(activeTab);
if (activeTab) {
jQuery('a[href="' + activeTab + '"]').tab('show');
}
});
setTimeout(function() {
location.reload();
}, 10000);
if (location.hash != '') {
openPage('Settings', this, 'orange');
}
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
每当网站刷新时,它都会返回空白(未选择选项卡)并且不会停留在最后一个选择的选项卡上。也尝试过data-toggle="tab"
,结果相同
解决方案
推荐阅读
- c - libgit2 git_checkout_head 和 GIT_CHECKOUT_SAFE 对工作目录不做任何事情
- excel - 用VBA在单元格中写一个excel公式
- reactjs - 反应材料 UI 网格
- visual-studio - VS Studio Community 2019:非解文件代码格式化时出现异常
- json - 在数组中循环 JSON 以获得 VBA 中的相同值
- reactjs - 无法从 Firebase 存储中检索下载网址
- c# - 如何连接用户选择的运算符,分配给变量?
- c# - 输入标签助手的本地化格式(日期)
- docker - Gitlab作业失败-找不到docker命令
- javascript - 在 iframe 或模式弹出窗口中打开我的网站,而不是重定向到我的页面