Browser zum Speichern des Tabs, das zuletzt geöffnet wurde, wenn auf den Browser geklickt wird. Zurück Button

Question

Ich verwende Produktregisterkarten, um meine Produkte auf meiner Homepage (Shopify-Site) einfach zu filtern. Wenn ein Benutzer jedoch klickt, um ein Produkt anzuzeigen, und sich dann entscheidet, auf die Schaltfläche "Zurück" zu klicken, gibt der Browser die Standardkategorie "Alle Produkte" und nicht die tatsächlich geöffnete # Registerkarte zurück.

Der Code für die aktiven Tabs in Flüssigkeit sind:

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

ich es geschafft haben, den Benutzer Rückkehr in die gleiche Scroll-Position wie in früheren zu machen, ist es trotzdem, auch die richtige Registerkarte reload machen? Entschuldigung wenn das einfach ist! Jede Hilfe würde sehr geschätzt werden!

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

Wenn Sie auf die Registerkarte klicken, hängt es an die URL an (z. B./# tab1)?

Wenn ja, wenn Sie weg navigieren und dann zurückschlagen, bringt es Sie zurück zur aktualisierten URL oder zum ursprünglichen? Wenn es sich um den aktualisierten handelt, können Sie möglicherweise die URL beim Paging-Laden ausspionieren und auf die richtige Registerkarte ".active" anwenden. Wenn nicht, müssen Sie möglicherweise einen Cookie setzen und lesen (siehe here) und/oder das window.history-Objekt aktualisieren.