jQuery Mobile 是一個基于 jQuery 框架的移動設備 UI 框架。它提供了一些方便易用的 UI 控件，可以快速構建出漂亮的移動應用界面。其中的一個重要特性就是內容分頁，讓用戶能夠很方便地在長篇內容中進行翻頁閱讀。

為了實現內容分頁，首先需要將內容分成多個頁面。可以通過在 HTML 中使用 div 元素來劃分頁面，每個 div 代表一頁內容，然后給它們加上相同的 class 名稱，比如<div class="page">。在 CSS 中，可以設置這個 class 名稱對應的 div 元素的高度為屏幕高度，這樣就可以保證每頁內容的高度相同。

/* CSS 中設置頁面高度 */
.page {
height: 100%;
}

接下來，在 jQuery Mobile 中，可以使用data-role="page"屬性來定義頁。在每個頁面中，使用data-role="content"屬性來定義內容區域。然后，用data-link="next"屬性將每個頁面鏈接到下一個頁面。

<div data-role="page">
<div data-role="content">
<p>第一頁內容...</p>
<a href="#page2" data-link="next">下一頁</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<p>第二頁內容...</p>
<a href="#page3" data-link="next">下一頁</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<p>第三頁內容...</p>
</div>
</div>

最后，使用 jQuery Mobile 中的 Swipe Navigation 功能，讓用戶可以通過左滑或右滑來翻頁。可以通過在 JavaScript 中設置swipeleft和swiperight事件來實現。

/* JavaScript 中設置 Swipe Navigation 事件 */
$(":mobile-pagecontainer").on("swipeleft", function (e) {
var current = $(".ui-page-active");
var nextPage = current.next("[data-role=page]");
if (nextPage.length >0) {
$.mobile.pageContainer.pagecontainer("change", nextPage.attr("id"), {
transition: "slide",
reverse: false,
changeHash: false
});
}
});
$(":mobile-pagecontainer").on("swiperight", function (e) {
var current = $(".ui-page-active");
var prevPage = current.prev("[data-role=page]");
if (prevPage.length >0) {
$.mobile.pageContainer.pagecontainer("change", prevPage.attr("id"), {
transition: "slide",
reverse: true,
changeHash: false
});
}
});

這樣，就可以很方便地實現 jQuery Mobile 中的內容分頁功能了。讓用戶可以更好地瀏覽長篇內容，提升用戶的體驗。