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.
I am not quite sure what I’ve missed. It’s still directs to the service page not the specific service tab.
