Link to Page with a Specific Tab Selected

Ask the community
,
1

I have a Routes Page with a container box that contains three tabs for travel mode (Car, Bus, Walk). I want to create buttons on the Home Page that when selected will link to the Routes Page with the selected button’s corresponding tab selected. No data needs to be pass.

Is it possible to achieve this with just a link URL parameter in Editor, or do I need to code?

I expect I’ll need the ID of the individual tab to be selected on page load. In Editor dev mode I can click and find the ID for the element containing the three tabs (“#tabs” in this case), but can’t find IDs for the individual tabs.

2

You should always know how to describe your issue the right way.

You always should mention everything about your SETUP first.

  1. What kind of Editor you use?
  2. What kind of Wix-Elements can be found inside of your project, which are involved into your issue?
  3. Did you use code, which one? If not, did you use a DATASET? (showing an excerpt).
  4. What is the structure of your database, if used?
  5. Ando so on. The more details you give about your setup, the faster you will get HELP.

So in your case, you used → WIX-TAB-ELEMENT ← ???

Your steps would be now the following…

1) You open the Wix-API-DOCS and you search for the element you have used…

https://dev.wix.com/docs/velo/api-reference/$w/introduction

In your case the TAB-ELEMENT…

2024-07-14 20_15_00-Window
2024-07-14 20_15_00-Window249×780 15.8 KB

  1. Then you check, what kind of possibilities are provided for the TAB-ELEMENT. What you can do, when using the TAB-ELEMENT? Check the API for TAB-ELEMENT.

If you have found the function you need → then your wished functionality you want to create will be possible to realize, if not → than you have to search for a → WORKAROUND <— (workarounds are → to 99% always possible).

1 Like
3

Hi, try this:

Step 1: Set Up Buttons on Home Page

  1. On your Home Page, create buttons for each travel mode (Car, Bus, Walk).
  2. Assign an onClick event to each button to navigate to the Routes Page with a query parameter indicating the selected travel mode.

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;
    }
});
1 Like
4

Thanks 365JPG, that works perfect.

I had to make one change, probably because the tabs were created using the Wix Editor and not code. Instead of a number to identify the tab … as in $w(‘#tabStrip’).changeTab(0); … I had to use the tab ID string assigned to it by Wix (eg. “singleTab0”).

I didn’t see any way to identify the individual tab IDs using Editor, but this small piece of code did the trick. (And don’t assume the tab IDs will be in numerical order. Mine weren’t.)


let myTabs = $w("#tabStrip").tabs;
let numberOfTabs = myTabs.length;
for (let i = 0; i < numberOfTabs; i++){
  console.log (Tab ID: " + myTabs[i].id); // eg. "singleTab1"
  console.log (Tab label: " + myTabs[i].label); // eg. "Car"
}
1 Like