Framework7 选项卡

Framework7 标签页是一组逻辑上分组的内容，可让您快速在它们之间移动并节省空间，例如手风琴。

标签页布局

查看 Framework7 标签页的布局

其中

• <div class = "tabs">: 这是所有标签页的必需包装器。 如果我们遗漏了这一点，标签页将完全无法工作。
• <div class = "tab">: 这是一个单独的标签页，它应该具有唯一的 id 属性。
• <div class = "tab active">: 这是一个单独的活动标签页，它使用额外的 active 类使标签页可见（活动）。

在标签页之间切换

如果希望用户可以在标签页之间切换，请在标签页布局中使用一些控制器。 为此，您应该创建带有 tab-link 类的链接（<a> 标签），其 href 属性等于目标标签页的 id 属性

<!-- 此处使用该链接激活第一个标签页，其 href 属性（#tab1）与第一个标签页（tab1）的 id 属性相同 -->

<a href = "#tab1" class = "tab-link active">标签页 1</a>

<!-- 此处使用该链接激活第二个标签页，其 href 属性（#tab2）与第二个标签页（tab2）的 id 属性相同 -->

<a href = "#tab2" class = "tab-link">标签页 2</a>

<a href = "#tab3" class = "tab-link">标签页 3</a>

切换多个标签页

如果您只有一个标签页链接并且想要在多个标签页之间切换，请使用类而不是使用 ID 和 data-tab 属性。

标签页链接的 data-tab 属性包含目标标签页的 CSS 选择器。

Framework7 中使用了不同类型的标签页