TabPanel Overview

The TabPanel control allows user to enable high level content organization, such as switching between views, data sets, or functional aspects of an application. The control not only help in organizing the content, but it is especially helpful when there is a lot of related content to be displayed on a page with a smaller screen.

Tabs

The TabPanel consists of tabs which are presented as a single row above their associated content. Each tab consists of a header element and a pane element that contains the tab content. The header element is always visible while the pane element is visible when the corresponding header is selected. Tabs can be selected with the mouse or keyboard and automatically update the content to reflect the current selection.

The markup used to initialize TabPanel controls consists of one element per tab, each with two children: the tab header and the tab content.

We suggest you use anchor elements (tag a) for the tab headers because they are semantically more meaningful than plain div elements.