changeTab( )

Changes the tabs element's current tab.

Description

The changeTab() function returns a Promise that is resolved when the tabs element finishes moving from the current tab to the tab referred to by tabReference.

You can retrieve tab elements to pass to the tabReference parameter from your tabs element using the currentTab, defaultTab, or tabs properties.

Changing tabs using changeTab() triggers the onChange() event handler.

Syntax

function changeTab(tabReference: string | Tab): Promise<Tab>

changeTab Parameters

NAME

TYPE

DESCRIPTION

tabReference

string | Tab

The tab within the tabs element to move to. Either a tab element or its ID without a preceding # character.

Returns

Fulfilled - The tab that the tabs element changed to.

Return Type:

Promise<Tab>

Related Content:

onChange()

Was this helpful?

Move to a different tab using an ID

Copy Code

1$w("#myTabsElement").changeTab("singleTab2");

Move to a different tab using a tab element

Copy Code

1let myNewTab = $w("#singleTab2");
2
3$w("#myTabsElement").changeTab(myNewTab);

Move to a different tab and log a message when the move is finished

Copy Code

1$w("#myTabsElement").changeTab("singleTab2")
2  .then((newTab) => {
3    console.log(`Done moving to ${newTab.id}`);
4  });

Get the list of tabs in a tabs element and move to one of the tabs

Copy Code

1let myTabs = $w("#myTabsElement").tabs;
2let numberOfTabs = myTabs.length; // 3
3
4let myNewTab = myTabs[2];
5$w("#myTabsElement").changeTab(myNewTab);
6
7let myCurrentTab = $w("#myTabsElement").currentTab;
8let myCurrentTabLabel = myCurrentTab.label; // "Third Tab"