Creating unique URL links for reach tab

[Daniel_Paris (Daniel Garcia Paris)]

I’ve been trying to implement a code from this post without success:

https://preview.webflow.com/preview/arrtist-bsw?utm_medium=preview_link&utm_source=designer&utm_content=arrtist-bsw&preview=7d51fbe7dcd8d856fe66a51be4ad7452&workflow=preview

I already changed the tabs ID and classes, but I still don’t see what I’m doing wrong. Any ideas?

Thanks

---

Here is my site Read-Only:
https://preview.webflow.com/preview/arrtist-bsw?utm_medium=preview_link&utm_source=designer&utm_content=arrtist-bsw&preview=7d51fbe7dcd8d856fe66a51be4ad7452&workflow=preview

[memetican (Michael Wells)]

Hey Daniel, you shared your preview link twice, what is the post you are referencing?

[Daniel_Paris (Daniel Garcia Paris)]

Sorry about that. I was referring to the tabs on this image

[memetican (Michael Wells)]

Ah, but you mentioned a forum post that you’re trying to implement?
That link is missing.

@Daniel_Paris

I’ve been trying to implement a code from this post without success:

[Daniel_Paris (Daniel Garcia Paris)]

Sorry, again. Here is the link:

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 …

There are a few more posts with the same code on the forum. But I use this one as a reference.

[memetican (Michael Wells)]

Ah that solution isn’t designed to handle URL encoding, and your tab names have spaces, which is why you see #Tab%202 in your querystring.

You can compensate for that in your changeTab function;

function changeTab() {
  var tabName = window.location.hash.substr(1);
  
  // Fix encoded spaces 
  tabName = tabName.replace(/%20/g, ' ');
  
  var tabEl = $('[data-w-tab="' + tabName + '"]');
  console.log(tabEl)
  if (tabEl.length) {
    tabEl.click();
  }
}

[Daniel_Paris (Daniel Garcia Paris)]

@memetican

function changeTab() {
  var tabName = window.location.hash.substr(1);
  
  // Fix encoded spaces 
  tabName = tabName.replace(/%20/g, ' ');
  
  var tabEl = $('[data-w-tab="' + tabName + '"]');
  console.log(tabEl)
  if (tabEl.length) {
    tabEl.click();
  }
}

That worked perfectly!!!
Many thanks