Tabs and browser back button

Design help General
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