Framework7 Tabs are the set of logically grouped content that facilitates you to quickly move between them and save the space like accordion.
See the layout of a Framework7 tab:
Switching Between Tabs
If you want that the user can switch between tabs, use some controller in tabs layout. For this, you should create links (<a> tags) with tab-link class and href attribute equal to the id attribute of target tab:
<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1) -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>
<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2) -->
<a href = "#tab2" class = "tab-link">Tab 2</a>
<a href = "#tab3" class = "tab-link">Tab 3</a>
Switch Multiple Tabs
If you have single tab link and you want to switch between multiple tabs, use classes instead of using ID's and data-tab attribute.
The data-tab attribute of tab-link contains CSS selector of target tab/tabs.
There are different types of tabs used in Framework7: