Streaming live at 10am (PST)

Solution - creating an URL link for a specific tab

Hi all,

I needed a solution for creating an URL link for a specific tab, i found other solutions like Accessing tabs from address bar or Linking to Specific Tab from another Link or Button but i needed a specific separate url for each tab.
Then I found this solution How to create a link to a specific tab? , (thanks a lot @design) and improved it a bit because it didn’t work well for me :).

So here you have an improved solution:

<script>
$( function() {
    function changeTab() {
        var tabName = window.location.hash.substr(1);
        var tabEl = $('[data-w-tab="' + tabName + '"]');
        if (tabEl.length) {
            tabEl.click();
        }
    }

    //when page is first loaded
    if(window.location.hash){
        changeTab();
    }

    //internal page linking
    $(window).on('hashchange', changeTab);

    $('[data-w-tab]').on('click', function(){
        history.pushState({}, '', '#'+$(this).data("w-tab"));
    });
});
</script>

How to use it:

  • add the code in Before body tag of the needed page
  • rename the tab1, tab2, tab3, etc. in the Element Settings panel, Tab Settings with the custom name you want to have in the URL.

Aaaaand, done :slight_smile:
I hope this will help you!

2 Likes

Hi @emma_luna, I was about to post a new topic about this and then saw your solution. Thanks for posting.

I noticed one issue remaining, which is that when I use the browser forward and back buttons, it takes multiple clicks to get back to an HTML tab I reached from a link. It’s no problem when I click the tabs directly, but links still cause issues for the browser going back and forth.

Hey @bgschust, thank you for finding the issue, I didn’t notice.

Unfortunately, I don’t know how to fix it as I am not so good at programming. If there is someone who can review the code and find where is the problem, it would be great! :slight_smile:

I’m learning Javascript from W3schools after doing a simple online course a while ago, so hopefully I can figure out code like that soon.

Hi @emma_luna - thank you for this! I have just tried the code snippet above and have found that with a /# before the tab name on the url the user is directed to the right section on the page but not to the right tab. Could anyone help me with this part?