色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery 長文本分頁

錢瀠龍2年前8瀏覽0評論

在網頁開發中,長文本的分頁顯示是一個常見的需求,而jQuery是一個非常實用的JS庫,提供了方便易用的文本分頁實現方式。

下面我們通過一個實例來介紹如何使用jQuery實現長文本分頁:

//HTML結構
<div id="page-wrap">
<div class="page">...</div>
<div class="page">...</div>
...
</div>
//CSS樣式
.page{
display: none;
}
//JS實現分頁
$(document).ready(function(){
var pageSize = 500; //每頁500個字符
var pageWrap = $("#page-wrap");
var fullText = pageWrap.text();
var pageCount = Math.ceil(fullText.length / pageSize); //計算總頁數
for(var i = 0; i < pageCount; i++){
$("
" + fullText.substr(i*pageSize, pageSize) + "
").appendTo(pageWrap); } pageWrap.children('.page').eq(0).show(); //默認顯示第一頁 }); //頁面切換 function changePage(index){ $("#page-wrap").children(".page").hide().eq(index).show(); }

以上代碼中,我們首先在頁面中定義了一個ID為“page-wrap”的div容器,其中每個子元素被定義為一個class為“page”的div,用于存儲分頁內容。然后通過JS計算總頁數,將全文分割后依次填充進每個div中,并默認顯示第一頁。

最終,我們通過編寫一個changePage函數來實現頁面切換,其中index參數表示要顯示的頁碼,使用jQuery查找到所有子元素為“.page”的div,將其隱藏,并只顯示對應頁碼的div。

在實際應用時,我們可以根據需要調整分頁大小、樣式、添加頁碼、導航等功能,實現更加完整的長文本分頁效果。