如何在重新加载页面后保留在选中的选项卡中 [英] How to remain in the tab selected after reloading the page

问题描述

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

我正面临的问题是，即使我重新加载标签C我的页面将返回到标签A.我需要一种方法来存储状态该标签在重新加载之前处于活动状态。

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

 < ul class =tabs> 
< li> 
< input type =radioname =tabsid =tab1checked /> 
< label for =tab1>标签A< / label> 
< div id =tab-content1class =tab-content> 
< div class =btn-div> 
< input type =buttonvalue =Refreshonclick =refresh（）;> 
< / div> 
< table class =x_table> 
< / table> 
< / li> 
 
< li> 
< input type =radioname =tabsid =tab1checked /> 
< label for =tab1>标签B< / label> 
< div id =tab-content1class =tab-content> 
< div class =btn-div> 
< input type =buttonvalue =Refreshonclick =refresh（）;> 
< / div> 
< table class =x_table> 
< / table> 
< / li> 
 
< li> 
< input type =radioname =tabsid =tab1checked /> 
< label for =tab1>标签C< / label> 
< div id =tab-content1class =tab-content> 
< div class =btn-div> 
< input type =buttonvalue =Refreshonclick =refresh（）;> 
< / div> 
< table class =x_table> 
< / table> 
< / li> 
< / ul> 
  

脚本：

  $（function（）{
 $（window）.unload（function（）{
 sessionStorage.setItem（tab1，$（'＃tab1'）。checked）; 
 sessionStorage.setItem（tab2，$（'＃tab3'）。checked）; 
 sessionStorage.setItem（tab3，$（'＃tab3'）。checked）; 
} ）; 
 $ b $（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; 
} 
}）; 
}）; 
  

预先致谢

解决方案

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

在重载页面之前：
localStorage.setItem（ActiveTabID，tab2 ）;

然后加载：

  $（窗口）。 load（function（）{
 var activeTab = localStorage.getItem（ActiveTabID）; 
 
 if（activeTab ==tab1）{
 $（'＃tab1Content' ）.show（）; 
 $（'＃tab2Content'）。hide（）; 
 $（'＃tab3Content'）。hide（）; 
 
 else else if （'＃tab2Content'）。$ b $（'＃tab1Content'）。hide（）; 
 $（'＃tab3Content' ）.hide（）; 
} 
  

同样tab3也会显示它是否处于活动状态。

I am working on a webpage. In one page we have 3 tabs A B and C. each tab contains some table with dynamic content and a Refresh button to reload the page(here we use window.location.reload() as we get the data as a single dump from data model).

The issue i'm facing is that even if i reload the tab C my page is going back to tab A. I need a method to store the status of which tab is active before reload.

The tab is called within an iframe with id 'mainFrame' 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";
}
});
});

Thanks in advance

解决方案

Store the active tab status in session, localStorage or as http request parameter and based on that hide/show the tab content on page load. For example, if it is localStorage, then,use:

Before reload page: localStorage.setItem("ActiveTabID" , "tab2");

Then on load:

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

likewise tab3, also show if it is active.

这篇关于如何在重新加载页面后保留在选中的选项卡中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！