下面是一個(gè)HTML分頁(yè)的案例代碼,你可以將其應(yīng)用于你自己的網(wǎng)站。
首先,我們需要?jiǎng)?chuàng)建一個(gè)HTML頁(yè)面,需要包含分頁(yè)功能的內(nèi)容。
<div id="content"> <p>第一頁(yè)的內(nèi)容</p> <p>第一頁(yè)的內(nèi)容</p> <p>第一頁(yè)的內(nèi)容</p> <p>第一頁(yè)的內(nèi)容</p> <p>第一頁(yè)的內(nèi)容</p> </div>
然后,我們需要為分頁(yè)編寫(xiě)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>
接下來(lái),我們需要編寫(xiě)JavaScript來(lái)處理分頁(yè)邏輯。
<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頁(yè)面中添加jQuery庫(kù)文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
通過(guò)以上代碼,我們就創(chuàng)建了一個(gè)可以實(shí)現(xiàn)分頁(yè)的HTML頁(yè)面。
上一篇vue led燈