下面是一個HTML分頁的案例代碼,你可以將其應(yīng)用于你自己的網(wǎng)站。
首先,我們需要創(chuàng)建一個HTML頁面,需要包含分頁功能的內(nèi)容。
<div id="content"> <p>第一頁的內(nèi)容</p> <p>第一頁的內(nèi)容</p> <p>第一頁的內(nèi)容</p> <p>第一頁的內(nèi)容</p> <p>第一頁的內(nèi)容</p> </div>
然后,我們需要為分頁編寫CSS樣式。
<style> #content { width: 600px; margin: 0 auto; } .page { display: none; } .active { display: block; } .pagination { list-style: none; margin: 20px 0; padding: 0; text-align: center; } .pagination li { display: inline-block; margin: 0 5px; } .pagination li a { color: #333; padding: 5px 10px; border: 1px solid #ccc; border-radius: 3px; } .pagination li.active a { background-color: #333; color: #fff; } </style>
接下來,我們需要編寫JavaScript來處理分頁邏輯。
<script> var page = 1; var perPage = 2; var totalPages = Math.ceil('<%= content.length %>' / perPage); $('#content').append('<div class="pagination"><ul></ul></div>'); for(var i = 1; i <= totalPages; i++) { $('.pagination ul').append('<li><a href="javascript:; ">' + i + '</a></li>'); } $('.pagination li:first-child').addClass('active'); $('.page').slice(0, perPage).addClass('active'); $('.pagination li a').click(function(){ var currentPage = $(this).text(); var start = (currentPage - 1) * perPage; var end = start + perPage; $('.page').removeClass('active'); $('.page').slice(start, end).addClass('active'); $('.pagination li').removeClass('active'); $(this).parent().addClass('active'); }); </script>
最后,我們需要在HTML頁面中添加jQuery庫文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
通過以上代碼,我們就創(chuàng)建了一個可以實(shí)現(xiàn)分頁的HTML頁面。
上一篇vue led燈