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.
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.
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?
@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?
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:
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!
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>