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 分頁。可以使用在博客、在線雜志等網站上,提供更加便捷的頁面瀏覽體驗。
下一篇代碼css排版基礎