Javascript 如何在重新加载页面后保留在所选选项卡中
我正在制作一个网页。在一个页面中,我们有3个选项卡A、B和C。每个选项卡都包含一些具有动态内容的表和一个刷新按钮,用于重新加载页面(这里我们使用window.location.reload(),因为我们从数据模型中以单个转储的形式获取数据) 我面临的问题是,即使我重新加载选项卡C,我的页面也会返回到选项卡A。在重新加载之前,我需要一种方法来存储哪个选项卡处于活动状态 该选项卡在id为“mainFrame”的iframe中调用 HTML:Javascript 如何在重新加载页面后保留在所选选项卡中,javascript,jquery,html,tabs,Javascript,Jquery,Html,Tabs,我正在制作一个网页。在一个页面中,我们有3个选项卡A、B和C。每个选项卡都包含一些具有动态内容的表和一个刷新按钮,用于重新加载页面(这里我们使用window.location.reload(),因为我们从数据模型中以单个转储的形式获取数据) 我面临的问题是,即使我重新加载选项卡C,我的页面也会返回到选项卡A。在重新加载之前,我需要一种方法来存储哪个选项卡处于活动状态 该选项卡在id为“mainFrame”的iframe中调用 HTML: 提前感谢将活动选项卡状态存储在会话、本地存储或http请求
提前感谢将活动选项卡状态存储在会话、本地存储或http请求参数中,并基于此在页面加载时隐藏/显示选项卡内容。 例如,如果是localStorage,则使用: 重新加载页面之前: setItem(“ActiveTabID”、“tab2”) 然后加载:
$(window).load(function() {
var activeTab = localStorage.getItem("ActiveTabID");
if(activeTab=="tab1"){
$('#tab1Content').show();
$('#tab2Content').hide();
$('#tab3Content').hide();
}else if(activeTab=="tab2"){
$('#tab2Content').show();
$('#tab1Content').hide();
$('#tab3Content').hide();
}
同样,tab3也显示它是否处于活动状态。一些提示:使用本地存储。在用户切换选项卡时,而不是在页面卸载时,使用localStorage保存当前打开的选项卡。卸载事件不可靠。
$(function(){
$(window ).unload(function() {
sessionStorage.setItem("tab1", $('#tab1').checked);
sessionStorage.setItem("tab2", $('#tab3').checked);
sessionStorage.setItem("tab3", $('#tab3').checked);
});
$(window).load(function() {
if (tab1){
document.getElementById("tab1").checked="true";
} else if (tab2){
document.getElementById("tab2").checked="true";
} else if (tab3){
document.getElementById("tab3").checked="true";
}
});
});
$(window).load(function() {
var activeTab = localStorage.getItem("ActiveTabID");
if(activeTab=="tab1"){
$('#tab1Content').show();
$('#tab2Content').hide();
$('#tab3Content').hide();
}else if(activeTab=="tab2"){
$('#tab2Content').show();
$('#tab1Content').hide();
$('#tab3Content').hide();
}