Question

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

液体中活动标签的代码是：

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

我设法让用户返回到与之前相同的滚动位置，无论如何还要重新加载正确的标签吗？对不起，如果这很简单！任何帮助将非常感激！

Answer 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");

Answer 2

当您点击标签时，它是否会将其附加到网址（例如/＃tab1）？

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

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

2 个答案: