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.