Streaming live at 10am (PST)

Linking a button to a specific tab in a tabs menu


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


#5

Closed accidentally.


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

#7

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


#8

You’re awesome too! Have a nice day!