Question

我正在开发一个网页。在一个页面中，我们有3个选项卡AB和C.每个选项卡包含一些带有动态内容的表和一个刷新按钮来重新加载页面（这里我们使用window.location.reload（），因为我们从数据模型中获取数据作为单个转储）。

我面临的问题是，即使我重新加载选项卡C，我的页面也会返回选项卡A.我需要一种方法来存储重新加载之前哪个选项卡处于活动状态。

在id为'mainFrame'的iframe中调用该标签 HTML：

<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab A</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>

<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab B</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>

<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab C</label>
<div id="tab-content1" class="tab-content">
<div class="btn-div">
<input type="button" value="Refresh" onclick="refresh();">
</div>
<table class="x_table" >
</table>
</li>
</ul>

SCRIPT：

$(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";
}
});
});

提前致谢

Answer 1

将活动选项卡状态存储在session，localStorage或http请求参数中，并基于该隐藏/显示页面加载时的选项卡内容。例如，如果是localStorage，则使用：

重新加载页面之前： 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，也显示它是否有效。

如何在重新加载页面后保留在选定的选项卡中

1 个答案: