Streaming live at 10am (PST)

Link to another page section ID

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,

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.

2 Likes

Hey Jason,

Thank you so much for your help! :pray: :pray: :pray:

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 :cry: 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

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.

Hi Jason,

Thanks for your update! :pray:

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

Hi,

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

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

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>

Hi Jason,

It worked with that code! :pray:

Thank you very much for your help.

Cheers,
Yeri

1 Like