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

Question

我正在根据 w3schools.com 上显示的示例使用选项卡。利用他们的示例，我根据自己的喜好调整了 html 和 css，但我遇到了页面重新加载的问题。我想在页面重新加载时返回到最后选择的选项卡(即事件选项卡)，无论是通过点击重新加载按钮还是提交按钮将数据发送到数据库。

下面贴出的javascript首先隐藏标签页内容，然后清除所有事件标签，然后将点击的任何标签设置为事件标签，同时清除之前的事件标签。

我玩过 java 脚本中的选项卡清除代码，但一直遇到这样的问题:当我单击不同的选项卡时不清除事件选项卡，和/或当我点击重新加载时清除所有内容。

所以我开始做一些研究，并在 MDN 上找到了使用 sessionstore() 的选项。 MDN 提供的基本示例完全合理，但将它们应用到此选项卡设计对我来说并不直观。我在用户登录时启动一个 session ，这样就可以利用一个 session 。

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

不知道我是否在这方面找错了树，但是我想以某种方式将当前选项卡存储在当前 session 中，以便用户在执行操作时返回到该选项卡页面重新加载或点击提交按钮将数据发送/获取到数据库。

我正在摆弄的代码如下:

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>

使用此代码，页面总是在页面加载时返回主页。显然我可以删除它并且没有选项卡成为“默认”页面，或者使其他页面成为页面重新加载时的默认页面。但我想要的是能够返回到当前 session 中的最后一个选项卡。我还想保留当前用户首次登录并开始新 session 时从主页开始的功能。

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

Answer 1

使用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

REF:https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage