JavaScript 在页面重新加载时保留标签答案

【问题标题】：JavaScript keep tab on page reloadJavaScript 在页面重新加载时保留标签
【发布时间】：2017-03-21 23:30:51
【问题描述】：

我的标签内容如下所示：

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

标签页的 JavaScript 如下所示：

<script>
function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

我正在使用 W3 学校的代码。当页面重新加载时，我希望我所在的选项卡不会重新加载到默认选项卡。编辑：为澄清起见，我希望在刷新页面时加载我单击的最后一个选项卡。

【问题讨论】：

您想在重新加载后转到默认选项卡吗？还是要转到上次单击的选项卡？
我上次点击的标签

标签： javascript html

【解决方案1】：

您必须使用一些持久性存储方法来实现此目的：cookie 或localStorage。

您必须将点击标签的名称保存在您的openCity 函数中，并在您点击id="defaultOpen" 附近阅读它。如果没有从 cookie 或 localStorage 中读取任何值，请执行默认点击。

我推荐 PPK 的cookie functions。

【讨论】：

【解决方案2】：

我更喜欢在网址中使用主题标签。

您应该将您的按钮更改为<a> 像这样：

   <a class="tablinks" href="#london" onclick="openCity(event, 'London')">London</a>

然后在文档准备就绪时检查主题标签并选择所需的标签：

$( document ).ready(function() {
    if(window.location.hash == ""){
      openCity(event, 'London')
    } else if( window.location.hash == "#paris"{
      openCity(event, 'Paris')
    }
});

等

【讨论】：