Javascript，在重新加载时返回上一个选项卡

Question

我正在玩基于w3schools.com上显示的示例的标签。 利用他们的例子，我已经根据自己的喜好调整了html和css，但是我遇到了页面重新加载的问题。 当页面重新加载时，无论是通过点击重新加载按钮还是通过提交按钮将数据发送到数据库，我想返回上一个选定的选项卡（即活动选项卡）。

下面发布的javascript首先隐藏标签页内容，然后清除所有活动标签，然后将点击的任何标签设置到活动标签，同时清除上一个活动标签。

我已经使用了java脚本中的选项卡清除代码，并且当我点击其他选项卡和/或在我重新加载时清除所有内容时，一直遇到不清除活动选项卡的问题。

所以我开始做一些研究并尝试在MDN上使用sessionstore（）作为一种可能性。 MDN的基本示例完全有意义，但将它们应用于此选项卡设计对我来说并不直观。 当用户登录时我开始一个会话，因此有一个会话可以利用。

我在这个网站上看到了与此相关的一些其他问题，但我无法将其转化为此。

不知道我是否在这上面咆哮错误的树，但不管怎样，我想将当前标签存储在当前会话中，以便用户返回到该标签，如果他们进行页面重新加载或点击提交按钮将数据发送/获取到数据库。

我正在摆弄的代码如下：

 function openEDO(event, plannerName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(plannerName).style.display = "block"; event.currentTarget.className += " active"; } document.getElementById("defaultOpen").click() 

 /* Style the tab */ div.tab { overflow: hidden; background-color: #CECECE; border: 0px solid #003399; width: 1200px; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; color: #003399; font-family: Helvetica; float: left; border: 0px solid; width: 150px; height: 50px; cursor: pointer; padding: 5px 5px; transition: 0.3s; font-size: 15px; float:left text-align: center; font-weight:bold; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ffcc00; color: #003399; } /* Create an active/current tablink class */ div.tab button.active { background-color: #003399; color: #ffcc00; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; animation: fadeEffect 0.3s; width: 1190px; } /* Fade in tabs */ @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} 

 <div class="tab"> <button class="tablinks" onclick="openEDO(event, 'Home')" id="defaultOpen">Home</button> <button class="tablinks" onclick="openEDO(event, 'PI')">Personal Info</button> <button class="tablinks" onclick="openEDO(event, 'PH')">Professional History</button> <button class="tablinks" onclick="openEDO(event, 'P1')">Plan 1</button> <div id="Home" class="tabcontent"> </div> <div id="PI" class="tabcontent"> </div> <div id="PH" class="tabcontent"> </div> <div id="P1" class="tabcontent"> </div> 

使用此代码，页面始终返回页面加载的主页。 显然我可以删除它并且没有tab是“默认”页面，或者使其他页面成为页面重新加载时的默认页面。 但我想要的是能够回到当前会话的最后一个标签。 当用户首次登录并开始新会话时，我还希望保留当前在主页启动的功能。

如果有人能帮助我解决这个问题，我将永远感激不尽。

Answer 1

您可以在本地存储或会话存储。 在用户使用您的应用时设置标签索引的值。 在页面加载时，您可以读取localstorage或会话存储的值，并使用基本的javaScript来关注您想要的任何选项卡。

Answer 2

使用localStorage或sessionStorage来记住活动选项卡。 我已经修改了JavaScript代码，但遗憾的是StackOverflow的代码段iframe将不允许您访问存储，因此您必须在不同的环境中对其进行测试。

 function openEDO(event, plannerName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(plannerName).style.display = "block"; event.currentTarget.className += " active"; // remember current tab localStorage.setItem('activeTabId', plannerName); } // restore current tab var activeTabId = localStorage.getItem('activeTabId'); if (activeTabId) { document.getElementById(activeTabId).click(); } else { document.getElementById('defaultOpen').click() } 

 /* Style the tab */ div.tab { overflow: hidden; background-color: #CECECE; border: 0px solid #003399; width: 1200px; } /* Style the buttons inside the tab */ div.tab button { background-color: inherit; color: #003399; font-family: Helvetica; float: left; border: 0px solid; width: 150px; height: 50px; cursor: pointer; padding: 5px 5px; transition: 0.3s; font-size: 15px; float:left text-align: center; font-weight:bold; } /* Change background color of buttons on hover */ div.tab button:hover { background-color: #ffcc00; color: #003399; } /* Create an active/current tablink class */ div.tab button.active { background-color: #003399; color: #ffcc00; } /* Style the tab content */ .tabcontent { display: none; padding: 6px 12px; animation: fadeEffect 0.3s; width: 1190px; } /* Fade in tabs */ @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} 

 <div class="tab"> <button class="tablinks" onclick="openEDO(event, 'Home')" id="defaultOpen">Home</button> <button class="tablinks" onclick="openEDO(event, 'PI')">Personal Info</button> <button class="tablinks" onclick="openEDO(event, 'PH')">Professional History</button> <button class="tablinks" onclick="openEDO(event, 'P1')">Plan 1</button> <div id="Home" class="tabcontent"> </div> <div id="PI" class="tabcontent"> </div> <div id="PH" class="tabcontent"> </div> <div id="P1" class="tabcontent"> </div> 

Answer 3

使用sessionStorage ，为每个按钮添加id，在页面加载时检查sessionStorage是否已设置？ 如果是，请单击活动按钮。 否则，请单击默认主页按钮：

在你的函数openEDO设置sessionStorage：

sessionStorage.setItem('sel_tab', plannerName);

https://jsfiddle.net/dalinhuang/2a6nsvp8/

JS：

  var seltab = sessionStorage.getItem('sel_tab');
  if (seltab) {
    document.getElementById("Btn" + seltab).click();
  } else {
    document.getElementById("BtnHome").click();
  }

HTML：

  <button class="tablinks" id="BtnHome" onclick="openEDO(event, 'Home')">Home</button>
  <button class="tablinks" id="BtnPI" onclick="openEDO(event, 'PI')">Personal Info</button>
  <button class="tablinks" id="BtnPH" onclick="openEDO(event, 'PH')">Professional History</button>
  <button class="tablinks" id="BtnP1" onclick="openEDO(event, 'P1')">Plan 1</button>

Window.sessionStorage

参考： https ： //developer.mozilla.org/en/docs/Web/API/Window/sessionStorage