jQuery Mobile是一個基于jQuery和HTML5技術的移動設備應用開發框架，可以幫助開發人員快速構建具有流暢UI和響應式設計的移動應用程序。其中的標簽頁組件是非常實用的，可以幫助我們輕松實現選項卡式的頁面切換。
使用jQuery Mobile實現標簽頁非常簡單，只需創建一個帶有data-role="page"的頁面容器，然后在容器內部添加帶有data-role="tabs"的標簽欄，再在每個標簽頁內添加一個帶有data-role="page"的容器即可。下面是一個示例代碼：
<html> <head> <meta charset="utf-8"> <title>jQuery Mobile Tabs Demo</title> <link rel="stylesheet" > <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script> </head> <body> <div data-role="page" id="page1"> <div data-role="header" data-position="fixed"> <h1>Tabs Demo</h1> </div> <div data-role="tabs"> <div data-role="navbar"> <ul> <li><a href="#tab1" data-icon="grid">Tab 1</a></li> <li><a href="#tab2" data-icon="star">Tab 2</a></li> <li><a href="#tab3" data-icon="user">Tab 3</a></li> </ul> </div> <div id="tab1" class="ui-body-d ui-content"> <p>This is the first tab.</p> </div> <div id="tab2" class="ui-body-d ui-content"> <p>This is the second tab.</p> </div> <div id="tab3" class="ui-body-d ui-content"> <p>This is the third tab.</p> </div> </div> <div data-role="footer" data-position="fixed"> <h4>Footer Info.</h4> </div> </div> </body> </html>在這個示例中，我們創建了一個帶有data-role="page"的頁面容器，并在容器內部添加了一個帶有data-role="tabs"的標簽欄。在標簽欄內部，我們使用了data-role="navbar"定義了一個導航欄，并在其中添加了三個標簽頁。每個標簽頁都是一個帶有data-role="page"的容器，通過ID屬性與導航欄建立關聯。 總的來說，使用jQuery Mobile的標簽頁組件可以輕松實現選項卡式的頁面切換，是開發移動應用的常用技術之一。
上一篇100行的html代碼
下一篇jquery id 帶點