ブラウザーの戻るボタンをクリックしたときに最後に開いたタブを記憶するブラウザー

Question

私のホームページ（Shopifyサイト）で私の製品を簡単にフィルターするために製品タブを使用しています。ただし、ユーザーがクリックして商品を表示してから戻るボタンをクリックすると、ブラウザーは開かれた実際の＃タブではなく、デフォルトの「すべての商品」カテゴリーを返します。

液体中のアクティブなタブのコードは次のとおりです。

<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

タブをクリックすると、URLに追加されますか（例：/＃tab1）？

もしそうであれば、遠ざけてから戻ってくると、更新されたURLまたは元のURLに戻りますか？それが更新されたものなので、pageloadのURLを盗聴し、正しいタブに.activeを適用することができるかもしれません。そうでない場合は、クッキーを設定して読み込み（hereを参照）、window.historyオブジェクトを更新する必要があります。