Linking a button to a specific tab in a tabs menu

Design help Custom code
#1

Hi,
I’m currently working on basically a one-page site. Here is the preview link: https://preview.webflow.com/preview/gotoapd-b39ad2?preview=a6c1898ae1362690b126ea6b1f117020

I have 4 buttons on the site (default blue color) and I’m trying to assign or link each button to a different tab in the tabs menu (our partner’s section) below. I’ve attempted to use this example in the forums: Linking to Specific Tab from another Link or Button but it seems that this example works with linking a different tab in another page. My Achilles heel is JQuery and I’m having a difficult time trying to solve this. I really would appreciate it if someone could please help me figure this out…Thank you

Link from topnavi to Tab1, Tab2, Tab3. How?
Multiple CMS Collections in one dynamic list
#2

So… where do you want the buttons to link to? Where are the tabs located? Where have you placed the custom code?

#3

Thank you samliew for the quick reply! There are four buttons, one in each section: kitchen, bath, lifestyle, and outdoor. Each button will need to link to the tabs in the tabs menu below (partner’s section) the four tabs are marked: kitchen, bath, lifestyle and outdoor.
The custom code that I’ve found is:

<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 I placed the custom code within the tag.

I certanly appreciate your assitance on this, I’m a little lost when it comes to JQuery.

#6

I didn’t find the custom code you posted, on your site. Anyway this would be incorrect, as that is for linking to tabs in another page.

I saw this on your published site though (do note that custom code only works on published sites):

<script>
  $('.custom-button').on('click', function (evt) {
    $('.target-tab-link').triggerHandler('click');
    evt.preventDefault();
  });
</script>

This is almost correct, however your classes custom-button and target-tab-link are not unique.

You need custom-button-1, custom-button-2, custom-button-3, custom-button-4 buttons,

then target-tab-link-1, target-tab-link-2, target-tab-link-3, target-tab-link-4,

then copy that custom code 4 times like this for each button/tab link pair:

<script>
  $('.custom-button-1').on('click', function (evt) {
    $('.target-tab-link-1').triggerHandler('click');
  });
  $('.custom-button-2').on('click', function (evt) {
    $('.target-tab-link-2').triggerHandler('click');
  });
  $('.custom-button-3').on('click', function (evt) {
    $('.target-tab-link-3').triggerHandler('click');
  });
  $('.custom-button-4').on('click', function (evt) {
    $('.target-tab-link-4').triggerHandler('click');
  });
</script>
4 Likes
Button Link to tab on same page
#7

It worked! Thank you so much SamLiew, really appreciate your help!!! You’re Awesome!!!

#8

You’re awesome too! Have a nice day!

1 Like
#9

Thank you for this @samliew. There’s just one thing I’m wondering - and that’s how I’d make it appear that my custom tab links are “active”?

#10

Any one know any way to make custom tab appear ‘active’?

#11

@samliew I don’t understand what I’m doing wrong…

I made this test page with buttons that should link to the coordinating coloured tab and tab pane:

https://preview.webflow.com/preview/test-project-bb9b34?utm_medium=preview_link&utm_source=designer&utm_content=test-project-bb9b34&preview=9f39bc2e7821bd4030c5ab71d0482a37&mode=preview

Live link: https://test-project-bb9b34.webflow.io

I’ve literally copy pasted your code (removed the 4th class as I only have 3 buttons) and copied the same tab IDs and button IDs. But nothing happens when I publish the site!

Is there something I’m missing here…? :face_with_monocle:

#12

You see the .? .custom-button-1 is a class name selector.

You have set IDs on your links, so you need to change your code to ID selectors.

$('#custom-button-1').on('click', function (evt) {
  $('#target-tab-link-1').triggerHandler('click');
});
2 Likes
#13

Oh, I see now!! So I need to set the classes rather than the IDs - thank you so much!!! :grin:

#14

Under one of my tabs i have some dynamic paginated content but when you hit next to bring up the next results the tab defaults to the first tab. So i tried in implement this solution but obviously the pagination throws complexity into the mix and it kills the next button thus killing pagination.

Have you been able to target a tab with pagination next and previous buttons using something like this?

Cheers

#15

@Sveky for complex requirements, I’m available for hire.

#16

Hi Sam!

The code works on the website I’m working on (thanks a ton!) but I was wondering why it doesn’t work if you put it in an “Embed” element? I did move the element above the tabs if it’s important.

Just curious! :slight_smile:

#17

@GeorgyDesign custom code usually needs to run after Webflow loads their scripts, and Webflow loads their scripts in the footer.