浏览器记住最后打开的标签页，当点击浏览器后退按钮时

问题描述：

我使用产品标签可以轻松地在我的主页（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>

我已成功地使用户返回到相同的滚动位置之前的，反正是有作出正确选项卡重装也？对不起，如果这很简单！任何帮助将非常感激！

答

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

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

答

当您单击该选项卡时，是否将它追加到URL（例如/ #tab1）？

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

浏览器记住最后打开的标签页，当点击浏览器后退按钮时

相关推荐