浏览器记住单击浏览器后退按钮时上次打开的选项卡答案

【问题标题】：Browser to remember the tab last opened when clicking browser back button浏览器记住单击浏览器后退按钮时上次打开的选项卡
【发布时间】：2017-09-03 15:25:44
【问题描述】：

我正在使用产品标签轻松过滤我主页（Shopify 网站）上的产品。但是，当用户单击查看产品然后决定单击返回按钮时，浏览器会返回默认的“所有产品”类别，而不是实际打开的 #tab。

liquid 中活动标签的代码为：

 <div class="product-tab-content">
  <table class="nav nav-tabs table-center" role="tablist">
    {% for block in section.blocks %}
      {% if block.settings.title != blank %} 
        <td role="presentation" class="{% if forloop.index == 1 %}{{'active'}}{% endif %}"><a href="#tab{{ forloop.index }}" aria-controls="tab{{ forloop.index }}" role="tab" data-toggle="tab">
         <img class="icon-hotkeys" src="{{ block.settings.image-icon | img_url: 'Vib1' }}"/> {{ block.settings.title }}</a></td>
       {% endif %}   
    {% endfor %}
  </table>

我已经设法使用户返回到与以前相同的滚动位置，是否也可以重新加载正确的选项卡？对不起，如果这很简单！任何帮助将非常感激！

【问题讨论】：

标签： javascript jquery shopify liquid

【解决方案1】：

you can store the current tab in localstorage;

// Store
localStorage.setItem("current-tab", "value-like-id-of-the-current-tab");

// Retrieve
localStorage.getItem("current-tab");

【讨论】：

感谢您的回复！我已经尝试过了，但它没有奏效。也许我错过了什么？选中的选项卡按钮上有一个“活动”类。

【解决方案2】：

当您单击选项卡时，它是否会将其附加到 url（例如 /#tab1）？

如果是这样，当您离开然后回击时，它会带您回到更新后的网址还是原始网址？如果它是更新的，那么您可以在页面加载时嗅探 url 并将 .active 应用于正确的选项卡。如果没有，您可能必须设置和读取 cookie（请参阅 here），和/或更新 window.history 对象。

【讨论】：