Framework7 - 标签页

描述

标签页是一组逻辑上分组的内容，允许我们快速地在它们之间切换，并像手风琴一样节省空间。

标签页布局

以下代码定义了标签页的布局：

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

其中：

• <div class = "tabs"> - 这是所有标签页的必需包装器。如果我们遗漏了它，标签页将完全无法工作。

• <div class = "tab"> - 这是一个单独的标签页，应具有唯一的 id 属性。

• <div class = "tab active"> - 这是一个单独的活动标签页，它使用额外的 active 类使标签页可见（活动）。

在标签页之间切换

您可以在标签页布局中使用一些控制器，以便用户可以在它们之间切换。

为此，您需要创建带有 tab-link 类和 href 属性（等于目标标签页的 id 属性）的链接（<a> 标签）：

<!-- 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>

切换多个标签页

如果您使用单个标签页链接在多个标签页之间切换，则可以使用类而不是使用 ID 和 data-tab 属性。

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

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

我们可以使用不同的标签页方式，这些方式在下面的表格中指定：