Streaming live at 10am (PST)

Remember current Tab on page refresh


#1

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.


#2

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.


#3

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?


#4

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.


#5

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


#6

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


#7

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

Thanks again!


#8

You're welcome.

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