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

jquery div 分頁

林玟書2年前9瀏覽0評論

jquery div 分頁是一種實現網頁內容分頁的簡單方法。它允許我們將一個較長的內容分成多個部分,通過分頁的方式來展示每個部分,使用戶能夠更加方便地閱讀。

為了實現jquery div 分頁,我們需要使用一些jquery代碼。我們可以在頁面中添加一個div元素,并將需要分頁的內容放置在里面。我們還需要添加一些控制分頁的代碼。

<div id="content">
<p>第一頁內容...</p>
<p>第二頁內容...</p>
<p>第三頁內容...</p>
<p>第四頁內容...</p>
<p>第五頁內容...</p>
<p>第六頁內容...</p>
<p>第七頁內容...</p>
<p>第八頁內容...</p>
</div>
<div id="pageNav"></div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var page = 1;
var perPage = 3;
var totalPage = Math.ceil($("#content").children().length / perPage);
showPage = function(page) {
$("#content").children().hide();
$("#content").children().slice((page-1)*perPage, page*perPage).show();
}
setPageNav = function() {
var nav = "<ul class='pagination'>";
for(var i=1; i<=totalPage; i++) {
nav += "<li><a href='#'>"+i+"</a></li>";
}
nav += "</ul>";
$("#pageNav").html(nav);
$("#pageNav .pagination li").eq(page-1).addClass("active");
}
setPageNav();
showPage(page);
$("#pageNav .pagination li a").on("click", function(){
page = $(this).text();
setPageNav();
showPage(page);
return false;
});
});
</script>

代碼中,我們首先定義了page、perPage和totalPage變量,它們分別用于保存當前頁碼、每頁顯示的內容數量和總頁數。在showPage函數中,我們使用slice方法從content元素中選擇需要顯示的內容,并使用show方法將它們顯示出來。在setPageNav函數中,我們生成一個分頁導航條并添加到頁面中,當用戶點擊其中的頁碼時,我們會調用showPage函數展示對應的內容。

通過以上的方法,我們就可以輕松實現jquery div 分頁。可以使用在博客、在線雜志等網站上,提供更加便捷的頁面瀏覽體驗。