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

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
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.

18

Any idea why this sort of thing would only work intermittently? I’m guessing that all scripts need to finish loading before this specific one can run and do its thing.