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

html 分頁的案例代碼

洪振霞2年前8瀏覽0評論
下面是一個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燈