Solution - creating an URL link for a specific tab

Design help General
1

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!

10 Likes
2

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.

1 Like
3

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:

4

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.

5

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?

6

I have been having a bear of a time with this.

First, would anyone be willing to share a read-only link to a site where they have successfully implemented this?

If not, when you say “rename the tab1, tab2, etc.,” are you talking about giving the tab an ID?

And what are you giving the ID to? Are you giving the ID to the tab pane? To the tab link? I have tried both with no success.

Are you changing the class of the tab features? One guy on the flux community message board told me to change the class of the tab panes to “tab” in order to make this work. But it did not work.

Thanks in advance.

7

I have just implemented the code from post 6 in Linking to Specific Tab from another Link or Button - #6 by danro
You only need to add a class with the corresponding name to each Tab Link in the Tabs Menu.
image

8

This seems to work only if the tab is one word. If there’s spaces for example like “About us” it doesn’t seem to work. I tried adding %20 “About%20Us”, but no results. Any help?

9

The Webflow class names in javascript don’t have spaces so ‘About Us’ would be ‘about-us’.

10

Thank you for your quick response. I’m not referring to the class name, I got that part. The script gets the tabName and assigns that value to the data-w-tab attribute, but if the tabName has a space it doesn’t seem to link to that specific tab anymore.

11

In that case you would have to modify the function getParam(name) in the script.

12

@Gail_Ranger Thank you for your response. How so? Any guidance to get closer to solving this would be highly appreciated. Thanks!

Edit: For those who have spaces and tab titles with multiple words, this is what I did to replace it with a dash so that the linking still works with the correct parameter. Hope this helps anyone that had the same issue as me:

<script>
$( function() {
    function changeTab() {
        var tabName = window.location.hash.substr(1);
        var tabTarget = $('[data-w-tab="' + tabName + '"]');
        if (tabTarget.length) {
            tabTarget.click();
        }
    }
    jQuery('[data-w-tab]').each(function(){
      var $this = $(this);
      var dataWTabValu = jQuery($this).attr('data-w-tab');
      var pargedDataTab = dataWTabValu.replace(/\s+/g,"-");
      jQuery($this).attr('data-w-tab', pargedDataTab);
    });

    //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>
2 Likes
13

LIFE SAVERS! This is what i have been looking for, thank you!

14

The code in the original post at the top of this thread works well.
In case it helps others @emma_luna hasn’t specifically mentioned that the format of the link then needs to be:
https://www.domain.com/pagename#tabname
And beware:

  • This is case sensitive!
  • Spaces in the tab name don’t work, as mentioned above
3 Likes
15

Just one issue… the tabs on my page are further down the page. Clicking on the link in the menu changes the tab, but won’t scroll down.
Any suggestions, @emma_luna @spirelli ?

Thanks

16

You’re right. I have the same issue as you: My tabs are also a bit further down. I don’t have the knowledge to fix this, and it would be great if someone else would be able to offer a solution.

17

Awesome @emma_luna ! This is what i was looking for it it does the job!

However, my tabs are further down the page. The problem is that when you use these links, you are not redirected like a classic “scroll to”.

Does anyone have a solution?

18

This is fantastic, thank you @emma_luna!

19

works! thank you so much @spirelli & @emma_luna !

20

Hi Guys, this works like a charm, thank you for this code!!!