How to code a button directly to a tab?

Ask the community
,
1

On my homepage I’ve created 4 buttons that I want to link to individual tabs on another page, however all the buttons just take you to the first tab. I’ve tried below code example in Dev Mode but that hasn’t seem to work. I’m pretty new to using Dev Mode so not sure if I’ve missed something. Can anyone help?!

These are the buttons I want to link the tabs to.

image
image976×224 6.72 KB

These are the individual tabs I want to be directed to.

image

Here is the code to be added in the Home Page’s code section:

import wixLocation from 'wix-location';

$w.onReady(function () {
    // Set the onClick event handlers for each button
    $w('#carButton').onClick(() => {
        wixLocation.to("/routes?mode=car");
    });

    $w('#busButton').onClick(() => {
        wixLocation.to("/routes?mode=bus");
    });

    $w('#walkButton').onClick(() => {
        wixLocation.to("/routes?mode=walk");
    });
});

Step 2: Handling URL Parameters on the Routes Page

On the Routes page, read the query parameters to determine which tab should be active when the page loads, and switch tabs accordingly.

import wixLocation from 'wix-location';

$w.onReady(function () {
    // Get the value of the mode parameter from the URL
    const mode = wixLocation.query.mode;

   // Select the appropriate tab based on the value of the mode parameter
    switch (mode) {
        case 'car':
            $w('#tabStrip').changeTab(0); // Let's assume that the "Car" tab is the first (index 0)
            break;
        case 'bus':
            $w('#tabStrip').changeTab(1); // Assume that the "Bus" tab is the second (index 1)
            break;
        case 'walk':
            $w('#tabStrip').changeTab(2); // Let's assume that the "Pedestrian" tab is the third (index 2)
            break;
        default:
          // If a valid mode parameter is not specified, select the default tab (for example, "Car")
            $w('#tabStrip').changeTab(0);
            break;
    }
});
2

I think you’re almost 95% of the way there!

Based on the documentation, to change the tabs you’ll use an ID for the tab, rather than it’s index.