Did you ever find a solution for this?
Iām still wrestling with a similar issue.
I want a bunch of links from a dropdown on the home page to link to the respective tab on another page.
See attached screenshots (e.g. clicking on the āFormsā link should link to the āFormsā tab/content on the āDashboardā page and so on).
I tried different solutions offered here in this forum, like:
Method and code seem essentially the same.
None of them work for me.
The link gets to the right page and section but itās not opening the right tab content. All the links from the dropdown lead to the same tab pane/content.
What is it that Iām doing wrong here?
Any extra advice for those of us who arenāt great with custom code? Iāve renamed my tabs and their respective buttons, but when it comes to the code, it looks like [data-w-tab] is obviously the tab, but how do you target/tell the code which specific button goes to which tab? I assume if I have 4 buttons with 4 tabs (specific services that should go to their respective tab on the services page), I should use this code 4x in the body tag and modify each? Not sure either about the custom name in the URL, because the url is always website.com/services.
Looking to make the services section (second down) go to the respective service tabs on the services page.
Thank you in advance for any help or pointers!
@Sam_Volpe
The custom code should go on the page with the tabs, on the page you are linking from you only need to add the URL (including the tab).
Is there any way to remove the ā#ā from the URL in the script?
Is there any way to create link for specific tab inside a tab component (nested tabs)?
The code in the original post at the top of this thread works well.
In case it helps others emma_luna hasnāt specifically mentioned that the format of the link then needs to be:
https://www.domain.com/pagename#tabname
And beware:
- This is case sensitive!
- Spaces in the tab name donāt work
No, sorry. Have you since Nov '21?
Possible solve for linking to a direct tab and scrolling to it when the page loads would be to modify the script slightly when you trigger the tab change. Havenāt tested it but if itās something people are interested in I can throw together a read only link.
$(function() {
function changeTab(shouldScroll = false) { // conditional so you can scroll on all tab changes or only the first
var tabName = window.location.hash.substr(1);
var tabTarget = $('[data-w-tab="' + tabName + '"]');
if (tabTarget.length) {
tabTarget.click();
if (shouldScroll) {
/*
Additional Code for scrolling
Assumes your tabs are at the top of your content you want scrolled into view.
*/
const offset = 72; // arbitrary offset to account for header height if you have a fixed header.
const duration = 500; // scroll duration in milliseconds
$(document.body).animate({
scrollTop: tabTarget.offset().top - offset // position from top of document - offset.
}, duration);
/* this could also be used on a div container or whatever your scrolling element is by targeting classname:
$('.main-container').animate({ scrollTop: tabTarget.offset().top - offset }, duration);
*/
}
}
}
jQuery('[data-w-tab]').each(function(){
var $this = $(this);
var dataWTabValu = jQuery($this).attr('data-w-tab');
var pargedDataTab = dataWTabValu.replace(/\s+/g,"-");
jQuery($this).attr('data-w-tab', pargedDataTab);
});
//when page is first loaded
if (window.location.hash) changeTab(true);
//internal page linking
$(window).on('hashchange', () => { changeTab() });
$('[data-w-tab]').on('click', function(){
history.pushState({}, '', '#'+$(this).data("w-tab"));
});
});
2 Likes
Hi~ I used that script as well.
But I have a problem here:
I must set the tab selection default as ānoneā.
If not, for example, there are 2 tabs with the first one as default, if the URL is /page?tab=first and targets that first tab, the script will kind of āunclickā that tab and the result is none.
Does anyone know how to avoid that / how to modify the script?
( That post was closed, so I paste the code by @danro here for easy reference. )
<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>
1 Like
Hi! Can someone do a short and clear tutorial about how to do this? Iāve tried so many options from other threads, and this one seems to be the most recent one.
From the top main menu, I want to be able to open a tab and scroll to this section. Also, it needs to work from other website pages. I was able to get the tab opening when clicking the link, but when I add the #tomysection in the URL it scrolls but doesnāt open the tab anymore.
1 Like
The script will do the tab switching, but because of how anchor links work, ?tab=xxx cannot mix with the use of #section.
Anybody found a solution for the scrolling problem?
I have thrown chatGPT at it for multiple hours now, but even that canāt fix this.
For those trying to figure out how to combine selecting a specific tab and scrolling to a certain section on the page: I just tried using the same name for the tab and the section ID and it worked for me!
1 Like