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