Remember current Tab on page refresh

Hi, guys and girls!

I am posting a quick and hopefully simple question regarding tabs in Webflow.

How would one go about implementing the functionality whereby a tab is remembered and reloaded once a page refresh occurs?

I have spent the best part of a day googling and experimenting with different javascript solutions but none seem to work. I believe the problem might be the default behaviour of Webflow tabs and also the fact that most of the solutions around seem to use the href property when loading tabs.

If anyone has any ideas or has dealt with this before, your help would be greatly appreciated.

Thanks in advance.

You mean I visit you page, I change to tab 2, then 3, I leave the page and come back later, OR refresh the page, and tab 3 should still be the one opened?

Isn’t this requires the use of a cookie? I guess so.

Thanks for the response @vincent

In my case I only need the tab on a page refresh and not really when the user leaves the page and returns at a later time.

Cookies do make sense, but javascript also has a localStorage function that can be used I believe. I have tried those solutions with no success. I still think the problem lies in the fact that Webflow tabs do not use href tags by default and therefore no url?

Is there a solution around this?

Ok, could you please explain to me the use case of that?

It may make sense to you but not to me at the moment, and there is maybe other ways to address what you’re looking for… I hope it makes sense :slight_smile:

I am not skilled at all in JS but finding design solutions is interesting.

Paste this in Site Settings > Custom Code > Footer Code:

<script>
Webflow.push(function() {
  $('.w-tab-link').each(function() {
    $(this).attr('href', '#' + $(this).attr('data-w-tab').toLowerCase().replace(/[^a-z0-9]+/, '-'));
  });
  if(location.hash != '') $('.w-tab-link[href="'+location.hash+'"]').trigger('click');
});
</script>

Now all tabs will have it’s own hash URL.

Demo: http://sandbox-903b9c.webflow.io/remember-tab-on-refresh#tab-3

1 Like

@vincent The app I have created with the exported code has a page with a Webflow tab section in it where every tab has CRUD features. The tabs are basically categories where you can upload new files etc.

Now, everything is functional and working but because I am not yet using AJAX due to lack of experience the page has to be refreshed for the new data to propagate. This is where I would like to have the page load to the tab last used.

I hope that makes sense. Please note that even though I am using custom code to implement functionality, I have not changed the code exported by Webflow.

@samliew Thanks for the script! I will try it in Webflow first and let you know what I find. Do you think this script can also be used after export?

Thanks again to both of you.

1 Like

@samliew @vincent That script seems to do the trick even in the exported code when adding into my site footer.

Thanks again!

2 Likes

You’re welcome.

Next time you can reach me here for custom web development.

1 Like

Hi @samliew Samliew, this doesn’t work with tabs that have paginated content. On page-change (which triggers a page refresh) it goes back to the active tab, which in my case is currently set to “none” which adds unnecessary clicking for the user. My project here:

1 Like

Hi @samliew

This does not seem to work anymore. I created a duplicate site just like yours and places the code in the footer and i can’t for the life of me get it to work… Any input would be greatly appreciated!

Here’s a link to the sample site I made for it: https://preview.webflow.com/preview/pauls-fantastic-project-f4d5a6?utm_medium=preview_link&utm_source=dashboard&utm_content=pauls-fantastic-project-f4d5a6&preview=2d72878e8084c3528433fbf05ccdb20b&mode=preview

Had a similar issue and needed to remember the tab on refresh. I tried Samliew solution it works fine in his sample URL but won’t replicate any longer. So I crafted my own solution and should work as a simple cut and paste into your footer code. I utilized local.storage in order to save the last clicked tab.

<script type="text/javascript">
   
    $(document).ready(function () {

    function activate(tab) {
        // switch all tabs off
        $(".w--current").removeClass(" w--current");

        // switch this tab on
        tab.addClass("w--current");
}
    if (localStorage) { // let's not crash if some user has IE7
        var index = parseInt(localStorage['tab'] || '0');
        activate($('.w-tab-link').eq(index));
    }
    // When a link is clicked
    $(".w-tab-link").click(function () {
        if (localStorage) localStorage['tab'] = $(this).index();
        activate($(this));
    });
});
</script>
2 Likes

Thanks for the code Russ, Worked a treat :+1: