选项卡

选项卡允许在不同的内容之间轻松切换。

选项卡布局

让我们看一下选项卡布局

<!-- Tabs wrapper, shoud have "tabs" class. Required element -->
<div class="tabs">
  <!-- First tab, should have "tab" class and unique id attribute -->
  <!-- First tab is active by default - additional "tab-active" class -->
  <div class="tab tab-active" id="tab1">
    ... Tab 1 content goes here ...
  </div>
  <!-- Second tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab2">
    ... Tab 2 content goes here ...
  </div>
  <!-- Third tab, should have "tab" class and unique id attribute -->
  <div class="tab" id="tab3">
    ... Tab 3 content goes here ...
  </div>
</div>

在什么位置

div class="tabs" - 所有选项卡所需的包装器。如果您缺少此元素，则选项卡将不起作用！
div class="tab" - 单个选项卡。应具有唯一id属性
div class="tab tab-active" - 单独活动选项卡。选项卡为默认活动（可见），应具有其他 tab-active 类

可滚动选项卡

如果您将选项卡置于可滚动的 <div class="page-content"> 中，那么它们将具有相互滚动 - 滚动一个选项卡也会滚动所有选项卡。若要避免这种情况（如果这种情况发生），建议将每个选项卡制作成页面内容，在这种情况下每个选项卡将具有自己的滚动

<div class="page">
  <div class="navbar">...</div>
  <!-- tabs is a direct child of page -->
  <div class="tabs">
    <!-- each tabs is a "page-content" -->
    <div class="page-content tab tab-active" id="tab1">
      ... Tab 1 content goes here ...
    </div>
    <div class="page-content tab" id="tab2">
      ... Tab 2 content goes here ...
    </div>
    <!-- Third tab, should have "tab" class and unique id attribute -->
    <div class="page-content tab" id="tab3">
      ... Tab 3 content goes here ...
    </div>
  </div>
</div>

切换选项卡

在设置好选项卡布局后，我们需要一些控制器，以便用户可以在选项卡之间切换。

为了使它工作，我们需要使用 tab-link 类和 href 属性（等于目标选项卡的 id 属性）创建链接（<a> 标签）

<!-- Link that activates first tab, has the same href attribute (#tab1) as the id attribute of first tab (tab1)  -->
<a href="#tab1" class="tab-link tab-link-active">Tab 1</a>

<!-- Link that activates 2nd tab, has the same href attribute (#tab2) as the id attribute of 2nd tab (tab2)  -->
<a href="#tab2" class="tab-link">Tab 2</a>

<!-- Link that activates 3rd tab, has the same href attribute (#tab2) as the id attribute of 3rd tab (tab3)  -->
<a href="#tab3" class="tab-link">Tab 3</a>

如您所见，第一个链接也具有 tab-link-active 类。这不是必需的，但如果所有此类链接位于相同的 DOM 树层级（相互父级的同级子级），那么脚本还将在与活动选项卡相关的链接上更改此 tab-link-active 类。当您的“活动”链接具有不同的可视样式时，它很有用（例如，分区控制中的按钮或选项卡栏中的链接）

切换多个选项卡

以上这种符号用 ID 属性来指定我们需要切换到的选项卡。但有时我们可能会遇到使用一个 tab-link 切换几个选项卡的情况，在这种情况下，我们可以使用类而不是 ID，以及 data-tab 属性来表示 tab-link。例如

<!-- Top Tabs -->
<div class="tabs tabs-top">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Bottom Tabs -->
<div class="tabs tabs-bottom">
  <div class="tab tab1 tab-active">...</div>
  <div class="tab tab2">...</div>
  <div class="tab tab3">...</div>
</div>
<!-- Tabs links -->
<div>
  <!-- This links will switch top and bottom tabs to .tab1 -->
  <a href="#" class="tab-link tab-link-active" data-tab=".tab1">Tab 1</a>
  <!-- This links will switch top and bottom tabs to .tab2 -->
  <a href="#" class="tab-link" data-tab=".tab2">Tab 2</a>
  <!-- This links will switch top and bottom tabs to .tab3 -->
  <a href="#" class="tab-link" data-tab=".tab3">Tab 3</a>
</div>

其中 data-tab 属性的 tab-link 具有目标选项卡/选项卡的 CSS 选择器

视图作为选项卡

为什么单个选项卡不能成为具有自己导航和布局的单独视图？它可以，因此您可以只将视图切换为选项卡。在这种情况下，我们将拥有类似于标签式应用程序的结构，其中每个选项卡表示一个独立的视图

<body>
  <!-- App root -->
  <div id="app">
    <!-- Views/Tabs container -->
    <div class="views tabs">
      <!--
        Tabbar for switching views-tabs. Should be a first child in Views.
        Additional "toolbar-bottom" class to set it on bottom
      -->
      <div class="toolbar tabbar toolbar-bottom">
        <div class="toolbar-inner">
          <a href="#view-home" class="tab-link tab-link-active">
            <i class="icon icon-home"></i>
          </a>
          <a href="#view-catalog" class="tab-link">
            <i class="icon icon-catalog"></i>
          </a>
          <a href="#view-settings" class="tab-link">
            <i class="icon icon-settings"></i>
          </a>
        </div>
      </div>
      <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
      <div id="view-home" class="view view-main tab tab-active">
        ...
      </div>

      <!-- Catalog View -->
      <div id="view-catalog" class="view tab">
        ...
      </div>

      <!-- Settings View -->
      <div id="view-settings" class="view tab">
        ...
      </div>
    </div>
  </div>
  ...
</body>

动画选项卡

也可以通过简单过渡来切换选项卡。这需要为 div class="tabs" 设置一个额外的 div class="tabs-animated-wrap" 包装器

<!-- Tabs animated wrapper, required to switch tabs with transition -->
<div class="tabs-animated-wrap">

  <!-- Tabs, tabs wrapper -->
  <div class="tabs">
    <!-- Tab 1, active by default -->
    <div id="tab1" class="tab tab-active">
      ... Tab 1 content ...
    </div>

    <!-- Tab 2 -->
    <div id="tab2" class="tab">
      ... Tab 2 content ...
    </div>

    <!-- Tab 3 -->
    <div id="tab3" class="tab">
      ... Tab 3 content ...
    </div>
  </div>
</div>

请注意，动画选项卡包装器 div class="tabs-animated-wrap" 必须具有固定高度。默认情况下，它的固定高度为其父级的 100% 高度

可滑动选项卡

也可以通过滑动来切换选项卡。这需要使用 Swiper Element（它已经是 Framework7 的一部分）。

在这个示例中，让我们将选项卡链接放在 Subnavbar 中，并且我们将使用 page-content 作为 tab 以分别为每个选项卡保留滚动位置

<!-- Swiper Element should be used as Tabs -->
<swiper-container class="tabs">
  <!-- Each Tab must be a "swiper-slide" element -->

  <!-- Tab 1, active by default -->
  <swiper-slide id="tab1" class="tab tab-active">
    ... Tab 1 content ...
  </swiper-slide>
  <!-- Tab 2 -->
  <swiper-slide id="tab2" class="tab">
    ... Tab 2 content ...
  </swiper-slide>
  <!-- Tab 3 -->
  <swiper-slide id="tab3" class="tab">
    ... Tab 3 content ...
  </swiper-slide>
</swiper-container>

选项卡应用程序方法

我们可以使用以下应用程序方法来控制选项卡

app.tab.show(tabEl, animate)

tabEl - 需要显示的选项卡的 HTMLElement 或 string（带 CSS 选择器）。必需
animate - boolean - 应使用动画显示还是不显示（针对动画选项卡或可滑动选项卡）。可选
此方法返回对象，其中包含显示和隐藏标签的 HTML 元素的 newTabEl 和 oldTabEl 属性

app.tab.show(tabEl, tabLinkEl, animate)

tabEl - 需要显示的选项卡的 HTMLElement 或 string（带 CSS 选择器）。必需
tabLinkEl - HTMLElement 或 string（带 CSS 选择器的）标签链接/按钮，可使用此标签激活。在具有复杂布局的情况下，它很有用，可告诉 Framework7 必须激活哪个标签链接/按钮
animate - boolean - 应使用动画显示还是不显示（针对动画选项卡或可滑动选项卡）。可选
此方法返回对象，其中包含显示和隐藏标签的 HTML 元素的 newTabEl 和 oldTabEl 属性

标签事件

标签将在标签元素和应用实例上触发以下 DOM 事件和事件

DOM 事件

事件	目标	说明
tab:show	标签元素<div class="tab">	当标签变为可见/活动时触发事件
tab:hide	标签元素<div class="tab">	当标签变为隐藏/不活动时触发事件
page:tabshow	页面元素<div class="page">	当页面的父级视图作为标签变为可见时触发事件
page:tabhide	页面元素<div class="page">	当页面的父级视图作为标签变为隐藏时触发事件

应用实例事件

也有应用实例事件

事件	参数	目标	说明
tabShow	tabEl	app	当标签变为可见/活动时触发事件。作为参数，事件处理程序会收到已变为可见的标签
tabHide	tabEl	app	当标签变为隐藏/不活动时触发事件。作为参数，事件处理程序会收到已变为隐藏的标签
pageTabShow	pageEl	app	当页面的父级视图作为标签变为可见时触发事件。作为参数，事件处理程序会收到页面元素，该元素是已变为可见的标签视图的子级
pageTabHide	pageEl	app	当页面的父级视图作为标签变为隐藏时触发事件。作为参数，事件处理程序会收到页面元素，该元素是已变为隐藏的标签视图的子级

可路由标签

标签可以是可路由的。可路由标签是什么意思和它好在哪里？

首先，它提供了通过普通链接导航到标签的机会，而不是所谓的特殊标签链接。
其次，当你导航到此类标签路由时，你可以加载带有必需标签的页面。
第三，启用浏览器历史记录时，当你向前或向后浏览历史记录时，将打开同一个标签。
最后但并非最不重要的是，当你使用可路由标签时，你可以使用与页面相同的方式加载标签内容，即使用 url、content、component 或 componentUrl

首先，我们需要在应用路由中指定标签路由。假设我们在 /tabs/ 路由上有一个带有可路由标签的页面

routes = [
  {
    // Page main route
    path: '/tabs/',
    // Will load page from tabs/index.html file
    url: './pages/tabs/index.html',
    // Pass "tabs" property to route, must be array with tab routes:
    tabs: [
      // First (default) tab has the same url as the page itself
      {
        // Tab path
        path: '/',
        // Tab id
        id: 'tab-1',
        // Fill this tab content from content string
        content: `
          <div class="block">
            <h3>About Me</h3>
            <p>...</p>
          </div>
        `
      },
      // Second tab
      {
        path: '/tab-2/',
        id: 'tab-2',
        // Fill this tab content with Ajax request:
        url: './pages/tabs/tab-2.html',
      },
      // Third tab
      {
        path: '/tab-3/',
        id: 'tab-3',
        // Load this tab content as a component with Ajax request:
        componentUrl: './pages/tabs/tab-3.html',
      },
    ],
  }
]

在 /tabs/index.html 页面上，我们可能会有以下结构，例如

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner">
      <div class="title">Routable Tabs</div>
    </div>
  </div>
  <div class="toolbar tabbar toolbar-bottom">
    <div class="toolbar-inner">
      <!-- additional "data-route-tab-id" must match to tab's ID in the specified routes -->
      <a href="/" class="tab-link" data-route-tab-id="tab-1">Tab 1</a>
      <a href="/tab-2/" class="tab-link" data-route-tab-id="tab-2">Tab 2</a>
      <a href="/tab-3/" class="tab-link" data-route-tab-id="tab-3">Tab 3</a>
    </div>
  </div>
  <!-- Additional "tabs-routable" is required on tabs -->
  <div class="tabs tabs-routable">
    <div class="tab page-content" id="tab-1"></div>
    <div class="tab page-content" id="tab-2"></div>
    <div class="tab page-content" id="tab-3"></div>
  </div>
</div>

与普通选项卡几乎相同，但选项卡链接和选项卡上不再有“tab-link-active”和“tab-active”类。这些类和选项卡将由路由器切换。另外还有一个新属性和类

data-route-tab-id - 附加选项卡链接属性，选项卡切换器需要此属性才能了解哪个链接与所需的路由相关联
tabs-routable - tabs 元素上需要的附加类

注意视图不能用作可路由选项卡。可路由选项卡只能用于视图/路由的内部！

可路由选项卡事件

当加载可路由选项卡内容时，路由器将在选项卡元素上触发以下 DOM 事件，并在路由器/视图/应用程序实例上触发事件

DOM 事件

事件	目标	说明
tab:init tab:mounted	标签元素<div class="tab">	可路由选项卡内容加载后立即触发事件
tab:beforeremove	标签元素<div class="tab">	可路由选项卡内容移除之前立即触发事件

路由器实例事件

路由器实例在自身实例中和其父级view实例和app实例中都发出事件

事件	目标	参数	说明
tabInit tabMounted	路由器视图 app	(newTabEl, tabRoute)	可路由选项卡内容加载后立即触发事件。事件处理程序会收到一个作为参数 `newTabEl` - 刚刚加载路由内容的选项卡 HTML 元素（新选项卡） `tabRoute` - 新选项卡路由
tabBeforeRemove	路由器视图 app	(oldTabEl, newTabEl, tabRoute)	可路由选项卡内容移除之前立即触发事件。事件处理程序会收到一个作为参数 `oldTabEl` - 刚刚移除路由内容的选项卡 HTML 元素（旧选项卡） `newTabEl` - 刚刚加载路由内容的选项卡 HTML 元素（新选项卡） `tabRoute` - 新选项卡路由

示例

tabs-static.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Static Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs">
    <div id="tab-1" class="page-content tab tab-active">
      <div class="block">
        <p>Tab 1 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </div>
    <div id="tab-2" class="page-content tab">
      <div class="block">
        <p>Tab 2 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </div>
    <div id="tab-3" class="page-content tab">
      <div class="block">
        <p>Tab 3 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </div>
  </div>
</div>

动画选项卡

tabs-animated.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Animated Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <div class="tabs-animated-wrap">
    <div class="tabs">
      <div id="tab-1" class="page-content tab tab-active">
        <div class="block">
          <p>Tab 1 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
            voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
            laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
            exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
            dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
            consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
            perferendis.</p>
          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
            consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
            iusto, repellat sed quisquam!</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
            voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
            Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
            autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
            impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
            consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
            Iure fugit, minima facere.</p>
        </div>
      </div>
      <div id="tab-2" class="page-content tab">
        <div class="block">
          <p>Tab 2 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
            voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
            laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
            exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
            dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
            consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
            perferendis.</p>
          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
            consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
            iusto, repellat sed quisquam!</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
            voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
            Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
            autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
            impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
            consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
            Iure fugit, minima facere.</p>
        </div>
      </div>
      <div id="tab-3" class="page-content tab">
        <div class="block">
          <p>Tab 3 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
            voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
            laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
            exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
            dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
            consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
            perferendis.</p>
          <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
            consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
            iusto, repellat sed quisquam!</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
            voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
            Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
            autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
            impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
            consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
            Iure fugit, minima facere.</p>
        </div>
      </div>
    </div>
  </div>
</div>

可滑动选项卡

tabs-swipeable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Swipeable Tabs</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="#tab-1" class="tab-link tab-link-active">Tab 1</a>
      <a href="#tab-2" class="tab-link">Tab 2</a>
      <a href="#tab-3" class="tab-link">Tab 3</a>
    </div>
  </div>
  <swiper-container class="tabs">
    <swiper-slide id="tab-1" class="page-content tab tab-active">
      <div class="block">
        <p>Tab 1 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </swiper-slide>
    <swiper-slide id="tab-2" class="page-content tab">
      <div class="block">
        <p>Tab 2 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </swiper-slide>
    <swiper-slide id="tab-3" class="page-content tab">
      <div class="block">
        <p>Tab 3 content</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium
          voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad
          laboriosam accusamus?</p>
        <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque
          exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui
          dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
        <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi
          consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus,
          perferendis.</p>
        <p>Atque quis totam repellendus omnis alias magnam corrupti, possimus aspernatur perspiciatis quae provident
          consequatur minima doloremque blanditiis nihil maxime ducimus earum autem. Magni animi blanditiis similique
          iusto, repellat sed quisquam!</p>
        <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim
          voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit!
          Adipisci!</p>
        <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem
          autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque
          impedit.</p>
        <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero
          consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque.
          Iure fugit, minima facere.</p>
      </div>
    </swiper-slide>
  </swiper-container>
</div>

可路由标签

var app = new Framework7({
  routes: [
    {
      path: '/',
      id: 'tab1',
      content: `
        <div class="block">
          <p>Tab 1 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
          <p>Saepe explicabo voluptas ducimus provident, doloremque quo totam molestias! Suscipit blanditiis eaque exercitationem praesentium reprehenderit, fuga accusamus possimus sed, sint facilis ratione quod, qui dignissimos voluptas! Aliquam rerum consequuntur deleniti.</p>
          <p>Totam reprehenderit amet commodi ipsum nam provident doloremque possimus odio itaque, est animi culpa modi consequatur reiciendis corporis libero laudantium sed eveniet unde delectus a maiores nihil dolores? Natus, perferendis.</p>
        </div>
      `,
    },
    {
      path: '/tab2/',
      id: 'tab2',
      content: `
        <div class="block">
          <p>Tab 2 content</p>
          <p>Suscipit, facere quasi atque totam. Repudiandae facilis at optio atque, rem nam, natus ratione cum enim voluptatem suscipit veniam! Repellat, est debitis. Modi nam mollitia explicabo, unde aliquid impedit! Adipisci!</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
        </div>
      `,
    },
    {
      path: '/tab3/',
      id: 'tab3',
      content: `
        <div class="block">
          <p>Tab 3 content</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam enim quia molestiae facilis laudantium voluptates obcaecati officia cum, sit libero commodi. Ratione illo suscipit temporibus sequi iure ad laboriosam accusamus?</p>
          <p>Deserunt adipisci tempora asperiores, quo, nisi ex delectus vitae consectetur iste fugiat iusto dolorem autem. Itaque, ipsa voluptas, a assumenda rem, dolorum porro accusantium, officiis veniam nostrum cum cumque impedit.</p>
          <p>Laborum illum ipsa voluptatibus possimus nesciunt ex consequatur rem, natus ad praesentium rerum libero consectetur temporibus cupiditate atque aspernatur, eaque provident eligendi quaerat ea soluta doloremque. Iure fugit, minima facere.</p>
        </div>
      `,
    },
  ]
});

tabs-routable.html

<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="title">Tabs Routable</div>
    </div>
  </div>
  <div class="toolbar toolbar-bottom tabbar">
    <div class="toolbar-inner">
      <a href="./" class="tab-link" data-route-tab-id="tab1">Tab 1</a>
      <a href="tab2/" class="tab-link" data-route-tab-id="tab2">Tab 2</a>
      <a href="tab3/" class="tab-link" data-route-tab-id="tab3">Tab 3</a>
    </div>
  </div>
  <div class="tabs tabs-routable">
    <div class="page-content tab" id="tab1"></div>
    <div class="page-content tab" id="tab2"></div>
    <div class="page-content tab" id="tab3"></div>
  </div>
</div>

改进此文档

此页面

选项卡布局

可滚动选项卡

切换选项卡
切换多个选项卡
视图作为选项卡
动画选项卡
可滑动选项卡
选项卡应用程序方法
标签事件

DOM 事件
应用实例事件

可路由标签

可路由选项卡事件

示例

动画选项卡
可滑动选项卡
可路由标签