Responsive Tabs / Posts /

Remove ID from URL when switching between tabs

1

Hello,
We have been using another tab script but yours is much better but I want to remove the ID from the URL so when someone presses the back button in a browser it takes them to the previous page straight away. We have lots of tabs on one page so UX isn't great when you have to press back many times before getting to the actual previous page.

Before we were using this which worked <li href="javascript:void(0);" data-id="#tab1"> 

But when I use the same code with yours it breaks the tabs.

Can we do this someone?

Many thanks

Tom

Tom Byrom  7 years ago   viewed: 6722    

3 Answers

-2

The hash ID cannot be removed from the URL as the tab content relies on it to switch tabs. But after reading https://gist.github.com/sstephenson/739659 maybe we can figure out a solution. I added the following script to the demo 1 in the download package:

<script> var detectBackOrForward = function (onBack, onForward) { hashHistory = [window.location.hash]; historyLength = window.history.length; return function () { var hash = window.location.hash, length = window.history.length; if (hashHistory.length && historyLength == length) { if (hashHistory[hashHistory.length - 2] == hash) { hashHistory = hashHistory.slice(0, -1); onBack(); } else { hashHistory.push(hash); onForward(); } } else { hashHistory.push(hash); historyLength = length; } } }; window.addEventListener("hashchange", detectBackOrForward( function () { tabbers[0].a[0].click(); }, function () { } )); </script>

Suppose you have only one tab content widget in the page. Then tabbers[0] is it. a[0] is its first tab. So the script will simulate the first tab click when it detects it is a back button click action.

Please test it thoroughly to confirm if it works well for your case. 

Milo   7 years ago
0
Thanks for the reply, I feel this is quite necessary for good user experience especially for those less familiar with web technology they might think there is an issue with the site if they keep pressing back and it doesn't actually go back.

I've tried it and yes it does go back to the first tab that was 'active' or clicked on when pressing the back button but then it gets stuck in a weird loop where the URL ID flicks between two ID's but its so quick I cannot see which one it is flickering between this happens every time you press the back button and it never actually goes back to the previous page?

I can send you a link, its a site in development so would rather send it in a private message?

Thanks


Tom Byrom
  7 years ago
0

Yes please give me the dev link.

The tabs widget has been designed to meet the requirement that tabs visiting history is trackable. It seems not all users like it.

Milo   7 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: