Linking to anchor and a query string to open a tab

Design help Custom code
1

I have three cards with a link, each link should go to an anchor link further down the page where there are 3 tabs. Each link should also activate the corresponding tab.

I have set up the link like this:
https://flowers-partner.webflow.io/rechnungsfreigabe?tab=freigabeberechtigte#funktionen

It works perfectly if you copy paste it into your browser, but it doesn’t work when you click on the link inside the same page. Inside the same page, only the anchor link works and the query is totally ignored.

If I take away the #funktionen then the query string does trigger the right tab.

Anybody got any brilliant solution to this?

Here is my site Read-Only:
https://preview.webflow.com/preview/flowers-partner?utm_medium=preview_link&utm_source=designer&utm_content=flowers-partner&preview=9640d06fdb8640806ed852fb5e7bce1a&pageId=63ea116e4e2405428c8d8add&workflow=preview

2

Hi Marcel I’ve seen this exact solution posted here somewhere, have you tried the search feature above? You should be able to find it.

3

I’ve been trying to search for it, but all provided solutions that I found are more or less the same and they don’t work when your click link is inside the same page as the anchor and tabs section.

To give a bit more input, this is the custom code I used:

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

  $('#' + tabName).triggerHandler('click');

  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>

And this is the structure of the inpage links:
/mh/rechnungsfreigabe?tab=freigabeberechtigte#funktionen

1 Like
4

I cannot remember if the more detailed solution I saw was designed for same-page links, but it shouldn’t be particularly complex.

Are you familiar with scripting? You’re wanting to capture you button click and then do two things -

  1. scroll to the top of the tabstrip
  2. click ( with code ) the appropriate tab to select it
5

Thank you Michael for the follow up. I just added the code and link structure I used to my earlier reply. All works fine when I only use the anchor link or when I only use the tab query, but together it just doesn’t function without a page reload.

6

I found the solution here Tabs (tab link + anchor).
But there was not much of explanation, so I will try to be a bit more guiding here.

It is surprisingly simple.

You create a link like normal and connect it to an anchor,
like you would do normally with an in-page anchor link.
Then you give that link an ID. For example id="linkContact"

Next you go the tab menu and see what the ID is of the tab link of the tab you want to open.
Lets say it is id="contact".

Next you paste the following code in the before section:

<script>
$('#linkContact').click(function () {
	$('#contact').triggerHandler('click');
});
</script>

And that is it. A functioning in-page anchor link with a tab trigger.

The code I used (here above) is perfect for linking to an anchor and triggering a tab when they are on a different page.

1 Like
7

Can I ask help for with the tabs code?
I have two tabs, and tab-1 content is longer than tab-2 content.

When I scroll to the bottom of tab-1 content and click tab-2 to go back to the top of tab-2 content.
When I scroll to the bottom of tab-2 content and click tab-1, I can’t go back to the top of tab-1 content.

How can I achieve this? I have added some code but I’m not sure if it’s correct.

here is a share link
https://preview.webflow.com/preview/test-blog-d76e35?utm_medium=preview_link&utm_source=designer&utm_content=test-blog-d76e35&preview=5ed9231fcbb363ae23c9dd18a108b5db&pageId=646af618a725242fc8754e74&workflow=preview

and code:

<script>
$('#tab-1-open').click(function () {
	$('#tab-1').triggerHandler('click');
});
$('#tab-2-open').click(function () {
	$('#tab-2').triggerHandler('click');
});
</script>