<!-- 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 屬性來指定我們需要切換到的標籤頁。但有時我們可能會遇到需要使用一個標籤頁連結切換幾個標籤頁的情況，對於這種情況，我們可以使用類別而不是 ID，並使用 data-tab 屬性作為標籤頁連結。例如

<!-- 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 屬性具有目標標籤頁/標籤頁的 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 的一部分）。

在這個範例中，我們將標籤連結放在次導覽列中，並且我們將使用 page-content 作為標籤，以分別保留每個標籤的捲動位置

<!-- 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 - 是否應該以動畫方式顯示（對於動畫或可滑動標籤）。選填
此方法傳回包含 newTabEl 和 oldTabEl 屬性的物件，其中包含已顯示和已隱藏的標籤 HTML 元素

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

tabEl - HTMLElement 或 string（帶有 CSS 選擇器）的要顯示的標籤。必填
tabLinkEl - HTMLElement 或 string（帶有 CSS 選擇器）的要使用此標籤啟用的標籤連結/按鈕。如果您有複雜的版面配置，則可傳入此參數，以告知 Framework7 必須啟用哪個標籤連結/按鈕
animate - boolean - 是否應該以動畫方式顯示（對於動畫或可滑動標籤）。選填
此方法傳回包含 newTabEl 和 oldTabEl 屬性的物件，其中包含已顯示和已隱藏的標籤 HTML 元素

標籤事件

標籤會在標籤元素和應用程式執行個體上觸發下列 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	router view app	(newTabEl, tabRoute)	在載入可路由分頁內容後，將立即觸發事件。事件處理常式會接收下列內容作為引數 `newTabEl` - 剛載入路由內容的分頁 HTML 元素（新分頁） `tabRoute` - 新分頁路由
tabBeforeRemove	router view 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 事件
應用程式執行個體事件

可路由標籤

可路由分頁事件

範例

動畫標籤頁
可滑動標籤
可路由標籤