Link to Tabs Help Please :)

Hey,

I’m trying to link to a tab on a different page from those 3 buttons on the home page to the appartment page:

I had achieved this before using this guide:

However, I can’t seem to get it to work. I’m sure its a pretty obvious mistake I made but I cant seem to find it.
If someone would be kind enough to have a quick look I’d appreciate it a lot :slight_smile:


https://preview.webflow.com/preview/seeschloessle?utm_medium=preview_link&utm_source=designer&utm_content=seeschloessle&preview=64eba4c9d00b985371fedf039fc3a953&mode=preview

@MaxWebflow - you need to assign classes to each tab that match up with the query string parameter being passed through, for example:

/appartments?tab=einzimmer

The button here needs a class of einzimmer on it:

image

image

Or it looks like you’ve added IDs to the tabs, in which case modify the code to be something like this:

<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('#' + tabName).triggerHandler('click'); // this is the only change

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>

It also looks like you only have the code embedded on the home page, add it to your custom code in site settings so it is added to every page.

Thanks for taking the time Sam!!
It was the first indeed, I didnt add the classes :roll_eyes:.

1 Like

Hi Sam,

I used your code on my website (life saver thank you!). I have one issue i was wondering if you could help with. As you can see the dropdowns on my product page all link to the right tabs, but once you’re actually on the products page, all the dropdowns are grey and don’t link to anything. Is there a way around this?

Would appreciate any help!

https://preview.webflow.com/preview/modutherm?utm_medium=preview_link&utm_source=dashboard&utm_content=modutherm&preview=5c878ad5d3268b2f52776af8a18de0d3&mode=preview

@Claudia_Bradley - would you mind providing a few screenshots and a published site link?

Yeah sure, sorry forgot you can only see the problem when its published! The published link is www.modutherm.co.uk. In both of the screenshots i’m hovering over the dropdown links.


@Claudia_Bradley - take off the id #products reference on all of your nav links:

<a href="/products?tab=burners#products" class="dropdown-link-5 w-dropdown-link w--current" tabindex="0">Burners</a>

I believe it’s causing the browser to think it’s an anchor tag rather than a url and preventing the click action from executing in the javascript.

That’s fixed it, thanks so much!!