How to remain in the tab selected after reloading the page

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/35935169/how-to-remain-in-the-tab-selected-after-reloading-the-page

标签

javascript

jquery

html

tabs