Tabs and browser back button

Design help General
1

Hi everyone,

Not 100% sure this the right category, but hope someone can help me with this.

I have a page with 4 tabs. Tab number 4 contains a list of items from a collection (let’s say it’s a list of blog posts). Obviously, by clicking on a blog post, the blog article opens but when clicking the browser back button instead of going back to tab n.4 the user is redirected to tab n.1. Is there a way to tell Webflow to go back to the last tab visited?

Note that when the user visits a different page of the website and then goes back to the page with the 4 tabs, the first tab is expected to be displayed.

Is this possible?
Thanks

PS. this is the website and I’m asking about the ‘Careers’ tab https://globalpraxis-275254-482930413ddc80d8ade.webflow.io/careers

2

It’s not about telling webflow, it is the browser. Not without custom code.

Whichever tab you set to active, will be active (open) on the page load.

3

Hi there.

It appears that you were able to figure this out on your careers tab…Could you explain to me how you were able to get the back button to work and open back to the careers tab? Would really appreciate it!

Thanks!

2 Likes
4

I second @Christian_Clark

Could you please explain how you did it?

5

I am sorry for my double post, but based on the ‘live’ website of @Giannicola_Baiardi I found a way to accomplish it.

In order for it to work, the tab (wrapper) buttons need to have the ‘target-tab-link’ class. And the tab text should have the ‘link’ ID.

Then you paste this custom code into your page options:

<script>
   document.querySelectorAll(".target-tab-link").forEach(function(element){
      element.addEventListener("click", setStorageId.bind(this));
      var childs = element.children;
      for (var i = 0; i < childs.length; i++) {
      childs[i].style.pointerEvents = "none";
      }
   })
   function setStorageId(event){
      window.sessionStorage.setItem('tabid', event.target.getAttribute("id"));
      
      var url = window.location.toString();
      url = url.split("#link")[0];
      window.history.pushState({}, 'projetcs', url);
    
   }
   document.addEventListener('DOMContentLoaded', function() {

      let link = window.location.href;
      let result = link.split("#link");
        
        if(result.length>=2){
            let tablink = result[1];
            
               if( tablink =='revenue' || tablink =='route'|| tablink =='direct'){
                  window.sessionStorage.setItem('tabid', tablink);
                  setTimeout(function(){ 
                  document.getElementById(tablink).click();
                  }, 20);
                }
          
        }else{
            setTimeout(function(){ 
                document.getElementById(window.sessionStorage.getItem('tabid')).click();
            }, 20);}

        
  
   })   
</script>
3 Likes
6

Hi @Luc_Reinders,

Thank you for helping solve this.

I tried the instructions above but needed some clarification.

I have done the following:

example1
example11293×932 151 KB
example2
example21264×1062 175 KB

I have also added the above code onto the page in the section, and also tried before the as well as at the site level. Neither seemed to work.

Just so we’re clear, I am navigating through my tabs, click an external link side one of those tabs. When I hit back, it should take me back to the tab I was previously on.

Thanks for the help,

Owen

7

Hey @ozone31912

I was able to get this to work with the code that @Luc_Reinders provided. Put the code in the footer section of this site custom code.

I only replaced the first line of code (“.target-tab-link”) with the class of my tab which is “tab” (“.tab”)

I also gave each tab button (not tab text) its own ID.

Thanks everyone for help with this

1 Like