Link to another page section ID

[Yeri_Hwang]

Hi guys, I’d really appreciate it if you could help me with following.

Basically, I want to create 4 buttons that links to the same tab section but different tab panel opened. So I managed to create an ID for each tab and set URL link /pagename#id-name. but it doesn’t seem to work.

Here’s my share link that you can take a look at it.

GO TO SECTION 2 HOME and click on each link
IF YOU WANT TO SEE HOW ITS SET UP FOR ID GO TO SERVICES AND CLICK ON TAB PANEL

https://preview.webflow.com/preview/vitex?utm_medium=preview_link&utm_source=designer&utm_content=vitex&preview=8d655ac17068fad7a87690003cda17f6&mode=preview

Much appreciated your help.

Thanks,

[jasondark]

Hi,

Go to your services page and select the section with the tabs. We want to give this a sane ID, I used services-tabs:

Next we need to give each tab button an ID that makes sense. Note that the link element is selected in the screenshot and has its ID set, not the text element within it: In this case I set the ID for the Product Development tab link to be product-development:

While you’re on the services page, add this script to the body code:

<script>
	window.onload = function () {
		const urlParams = new URLSearchParams(window.location.search);
		const tab = urlParams.get('tab');
		if (tab) {
			const tabButton = document.getElementById(tab);
			tabButton.click();
		}
	}
</script>

Next head over to your home page. For each link, set its href path as such:

Note the format to use:
Product button: /services?tab=product-development#services-tabs

What is important is that the tab you set here matches the same ID you set for the tab link on the services page. If you don’t do this then the script will not work.

Also you do not need to use a full href like https://vitex.webflow.io/services?tab=product-development#services-tabs. You only need to set the path, so /services?tab=product-development#services-tabs will work fine. This way the link will work on your staging and live site.

[Yeri_Hwang]

@jasondark

/services#services-tabs?tab=product-development

Hey Jason,

Thank you so much for your help!

So I’ve followed your solutions. 01 Gave a sane ID to the section with tabs. 02 Gave each tab an ID, not the text element within it. 03 Added a code to the Service page body. 04 Used tab link that matches the same ID.

However, it didn’t work I am not quite sure what I’ve missed. It’s still directs to the service page not the specific service tab.
https://preview.webflow.com/preview/vitex?utm_medium=preview_link&utm_source=designer&utm_content=vitex&preview=8d655ac17068fad7a87690003cda17f6&pageId=5e50f934670c44a28470dc35&mode=preview

[jasondark]

Hey I can see that the section on the service page with the tabs has its ID set to Services-tabs not services-tabs. It is case sensitive, so you need to fix this.

Secondly, I actually put you wrong (sorry!) The correct format for the links on your home page is this:
/services?tab=product-development#services-tabs

not this, as I had originally said:
/services#services-tabs?tab=product-development

I will update my answer above in case anyone is reading this in future. Try this and let me know how you get on.

[Yeri_Hwang]

Hi Jason,

Thanks for your update!

I’ve fixed up the tab ID to be ‘services-tabs’ and it worked. So now the link goes to the tab section position.
However, they still goes to the same tab section which is a default active tab not the specific tab opened.

So I’ve tried to set an ID for Tab content not Tab Text but still didn’t work. Please see attached image.

https://preview.webflow.com/preview/vitex?utm_medium=preview_link&utm_source=designer&utm_content=vitex&preview=8d655ac17068fad7a87690003cda17f6&pageId=5e50f934670c44a28470dc35&mode=preview

[jasondark]

Hi,

It’s the tab links that need IDs set, not their corresponding tab panes:

[Yeri_Hwang]

@jasondark

services-tabs

Hey Jason,

Thanks for your reply. I’ve tried with the tab links ID but still doesn’t seem to work. It keeps goes to the default active tab. Any other reason that you could think of? So sorry to be pain!

https://preview.webflow.com/preview/vitex?utm_medium=preview_link&utm_source=designer&utm_content=vitex&preview=8d655ac17068fad7a87690003cda17f6&mode=preview

Thanks,
Yeri

[jasondark]

Maybe try updating the script to this so that it fires once the entire page has finished loading:

<script>
	window.onload = function () {
		const urlParams = new URLSearchParams(window.location.search);
		const tab = urlParams.get('tab');
		if (tab) {
			const tabButton = document.getElementById(tab);
			tabButton.click();
		}
	}
</script>

[Yeri_Hwang]

Hi Jason,

It worked with that code!

Thank you very much for your help.

Cheers,
Yeri

[Thomas_Limbuechler (Thomas Limbüchler)]

Hi Jason,

the solution is perfect.

We also implemented it on one of our client’s websites: Alpha & Partner Consulting – there we linked these green shapes with another page where the chosen service is pre-selected.

Unfortunately, we found a “bug”. The script does not work on several browsers. Do you have an idea, of how to solve that?

Also, Yeri’s website has the same issue when using e.g. Firefox (98.0.1, 64-Bit) or Safari (15.3, 17612.4.9.1.8).

It would be awesome, if you know how to solve that issue.

All the best,
Thomas

[MaggieMgGill (Maggie)]

Hi, Jason!

Thanks to this post and your solution, I was able to use a similar design for a client’s website, which involved linking specific services from the homepage to their appropriate menu tabs on the services page.

I tested this on Brave and Chrome browsers, and it worked perfectly. However, it appears that in some browsers, when a user clicks on a service link from the homepage, the tab on the services page that appears is always the same, i.e. “Clinical facial treatments”. (screenshot for reference)

The strange thing is that I’ve tested this on Chrome browsers on several devices, and it sometimes works and sometimes doesn’t.

Read-only link: Wellness centre website