如果我單擊任何數字，分頁順序將不起作用。如果我單擊數字 3，它會跳到數字 4，每次我單擊數字時，它都會跳到另一個數字。但是，如果我單擊下一個和上一個按鈕，它就可以正常作業。它的發生是因為省略號 li。任何幫助，將不勝感激。謝謝你。下面是我的片段
jQuery($ => {
let pageSize = 2;
let pageCount = Math.ceil($('.content').length / 2);
let $pageContainer = $('.page-container');
let $pageLinks = $('#pagin li a.page');
let $prev = $('#prev');
let $next = $('#next');
let currentPage = $pageContainer.data('page');
let setActivePage = page => {
let start = pageSize * (page - 1);
let end = pageSize * page;
$(".content").hide().slice(start, end).show();
$('#prev').toggleClass('disabled', page <= 1);
$('#next').toggleClass('disabled', page >= pageCount);
$pageLinks.removeClass("current");
$pageLinks.eq(page - 1).addClass('current');
$pageContainer.data('page', page);
}
setActivePage(currentPage);
$pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
$prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
$next.on('click', e => setActivePage($pageContainer.data('page') 1));
});
$(document).ready(function() {
/*pagination numbers*/
$(".pagination1").click(function(){
$(".beforenum").css('display','none');
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".pagination4").css("display","block");
$(".pagination5").css("display","block");
$(".pagination6").css("display","none");
$(".pagination7").css("display","none");
$(".afternum").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
})
$(".pagination4").click(function(){
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".beforenum").css("display","none");
$(".pagination6").css("display","none");
})
$(".pagination5").click(function(){
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".beforenum").css("display","block");
$(".pagination6").css("display","block");
$(".pagination4").css("display","block");
$(".pagination7").css("display","none");
})
$(".pagination6").click(function(){
$(".pagination7").css('display','block');
$(".pagination4").css("display","none");
$(".pagination5").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
$(".afternum").css('display','block');
})
$(".pagination7").click(function(){
$(".afternum").css('display','none');
$(".pagination8").css("display","block");
$(".pagination9").css("display","block");
$(".pagination5").css("display","none");
})
$(".pagination10").click(function(){
$(".afternum").css('display','none');
$(".pagination8").css("display","block");
$(".pagination9").css("display","block");
$(".pagination7").css("display","block");
$(".pagination6").css("display","block");
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".pagination4").css("display","none");
$(".pagination5").css("display","none");
$(".beforenum").css("display","block");
})
/* next/previous click function */
$(document).ready(function () {
$('#next').click(function() {
if($(".pagination1 a").hasClass('current')) {
$(".beforenum").css('display','none');
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".pagination4").css("display","block");
$(".pagination5").css("display","block");
$(".pagination6").css("display","none");
$(".pagination7").css("display","none");
$(".afternum").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination4 a").hasClass('current')) {
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".beforenum").css("display","none");
$(".pagination6").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination5 a").hasClass('current')) {
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".beforenum").css("display","block");
$(".pagination6").css("display","block");
$(".pagination4").css("display","block");
$(".pagination7").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination6 a").hasClass('current')) {
$(".pagination7").css('display','block');
$(".pagination4").css("display","none");
$(".pagination5").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
$(".afternum").css('display','block');
}
});
$('#next').click(function() {
if($(".pagination7 a").hasClass('current')) {
$(".afternum").css('display','none');
$(".pagination8").css("display","block");
$(".pagination9").css("display","block");
$(".pagination5").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination10 a").hasClass('current')) {
$(".rightpagpos").addClass('disabled');
}
});
$('#prev').click(function() {
if($(".pagination5 a").hasClass('current')) {
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".beforenum").css("display","block");
$(".pagination6").css("display","block");
$(".pagination4").css("display","block");
$(".pagination7").css("display","none");
}
});
$('#prev').click(function() {
if($(".pagination6 a").hasClass('current')) {
$(".pagination7").css('display','block');
$(".pagination4").css("display","none");
$(".pagination5").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
$(".afternum").css('display','block');
}
});
$('#prev').click(function() {
if($(".pagination4 a").hasClass('current')) {
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".beforenum").css("display","none");
$(".pagination6").css("display","none");
}
});
});
});
.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 500px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a.disabled {
pointer-events: none;
opacity: 0.4;
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
.beforenum{
display:none;}
.pagination8{display:none;}
.pagination9{display:none;}
.pagination6{display:none;}
.pagination7{display:none;}
.beforenum,.afternum{
float: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
<div class="content">17 I have some content</div>
<div class="content">18 I have some content</div>
<div class="content">19 I have some content</div>
<div class="content">20 I have some content</div>
<div class="content">21 I have some content</div>
<div class="content">22 I have some content</div>
<div class="content">23 I have some content</div>
<div class="content">24 I have some content</div>
</div>
<div id="pagin">
<ul>
<li>
<a href="#" id="prev">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg>
</a>
</li>
<li class="pagination1"><a class="page current" href="#">1</a></li>
<li class="beforenum"><a class="" href="#" >...</a></li>
<li class="pagination2"><a class="page" href="#">2</a></li>
<li class="pagination3"><a class="page" href="#">3</a></li>
<li class="pagination4"><a class="page" href="#">4</a></li>
<li class="pagination5"><a class="page" href="#">5</a></li>
<li class="pagination6"><a class="page" href="#">6</a></li>
<li class="pagination7"><a class="page" href="#">7</a></li>
<li class="afternum"><a class="" href="#" >...</a></li>
<li class="pagination8"><a class="page" href="#">8</a></li>
<li class="pagination9"><a class="page" href="#">9</a></li>
<li class="pagination10"><a class="page" href="#">10</a></li>
<li>
<a href="#" id="next">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a>
</li>
</ul>
</div>uj5u.com熱心網友回復：
這種表達；$(e.target).closest("li").index())沒有給出你想要的結果，因為這兩個<li ><a href="#">...</a></li>元素，也是孩子，你沒有考慮他們。但使用parseInt($(e.target).contents().text()))代替就足夠了。
只需洗掉這兩個元素也可以。
jQuery($ => {
let pageSize = 2;
let pageCount = Math.ceil($('.content').length / 2);
let $pageContainer = $('.page-container');
let $pageLinks = $('#pagin li a.page');
let $prev = $('#prev');
let $next = $('#next');
let currentPage = $pageContainer.data('page');
let setActivePage = page => {
let start = pageSize * (page - 1);
let end = pageSize * page;
$(".content").hide().slice(start, end).show();
$('#prev').toggleClass('disabled', page <= 1);
$('#next').toggleClass('disabled', page >= pageCount);
$pageLinks.removeClass("current");
$pageLinks.eq(page - 1).addClass('current');
$pageContainer.data('page', page);
}
setActivePage(currentPage);
$pageLinks.on('click', e => setActivePage(parseInt($(e.target).contents().text())));
$prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
$next.on('click', e => setActivePage($pageContainer.data('page') 1));
});
$(document).ready(function() {
/*pagination numbers*/
$(".pagination1").click(function(){
$(".beforenum").css('display','none');
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".pagination4").css("display","block");
$(".pagination5").css("display","block");
$(".pagination6").css("display","none");
$(".pagination7").css("display","none");
$(".afternum").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
})
$(".pagination4").click(function(){
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".beforenum").css("display","none");
$(".pagination6").css("display","none");
})
$(".pagination5").click(function(){
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".beforenum").css("display","block");
$(".pagination6").css("display","block");
$(".pagination4").css("display","block");
$(".pagination7").css("display","none");
})
$(".pagination6").click(function(){
$(".pagination7").css('display','block');
$(".pagination4").css("display","none");
$(".pagination5").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
$(".afternum").css('display','block');
})
$(".pagination7").click(function(){
$(".afternum").css('display','none');
$(".pagination8").css("display","block");
$(".pagination9").css("display","block");
$(".pagination5").css("display","none");
})
$(".pagination10").click(function(){
$(".afternum").css('display','none');
$(".pagination8").css("display","block");
$(".pagination9").css("display","block");
$(".pagination7").css("display","block");
$(".pagination6").css("display","block");
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".pagination4").css("display","none");
$(".pagination5").css("display","none");
$(".beforenum").css("display","block");
})
/* next/previous click function */
$(document).ready(function () {
$('#next').click(function() {
if($(".pagination1 a").hasClass('current')) {
$(".beforenum").css('display','none');
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".pagination4").css("display","block");
$(".pagination5").css("display","block");
$(".pagination6").css("display","none");
$(".pagination7").css("display","none");
$(".afternum").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination4 a").hasClass('current')) {
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".beforenum").css("display","none");
$(".pagination6").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination5 a").hasClass('current')) {
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".beforenum").css("display","block");
$(".pagination6").css("display","block");
$(".pagination4").css("display","block");
$(".pagination7").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination6 a").hasClass('current')) {
$(".pagination7").css('display','block');
$(".pagination4").css("display","none");
$(".pagination5").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
$(".afternum").css('display','block');
}
});
$('#next').click(function() {
if($(".pagination7 a").hasClass('current')) {
$(".afternum").css('display','none');
$(".pagination8").css("display","block");
$(".pagination9").css("display","block");
$(".pagination5").css("display","none");
}
});
$('#next').click(function() {
if($(".pagination10 a").hasClass('current')) {
$(".rightpagpos").addClass('disabled');
}
});
$('#prev').click(function() {
if($(".pagination5 a").hasClass('current')) {
$(".pagination2").css("display","none");
$(".pagination3").css("display","none");
$(".beforenum").css("display","block");
$(".pagination6").css("display","block");
$(".pagination4").css("display","block");
$(".pagination7").css("display","none");
}
});
$('#prev').click(function() {
if($(".pagination6 a").hasClass('current')) {
$(".pagination7").css('display','block');
$(".pagination4").css("display","none");
$(".pagination5").css("display","block");
$(".pagination8").css("display","none");
$(".pagination9").css("display","none");
$(".afternum").css('display','block');
}
});
$('#prev').click(function() {
if($(".pagination4 a").hasClass('current')) {
$(".pagination2").css("display","block");
$(".pagination3").css("display","block");
$(".beforenum").css("display","none");
$(".pagination6").css("display","none");
}
});
});
});.content {
margin: 1px;
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
background-color: gray;
}
#pagin {
clear: both;
padding: 0;
width: 500px;
margin: 0 auto;
}
#pagin li {
float: left;
margin-right: 10px;
}
#pagin li a {
display: block;
color: #717171;
font: bold 11px;
text-shadow: 0px 1px white;
padding: 5px 8px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
background: #f9f9f9;
background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a.current {
color: white;
text-shadow: 0px 1px #3f789f;
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
background: #7cb9e5;
background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}
#pagin li a.disabled {
pointer-events: none;
opacity: 0.4;
}
#pagin li a:hover {
-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
background: #fff;
background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}
#pagin li a:active,
#pagin li a.current:active {
-webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
-moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}
#pagin li a.current:hover {
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
background: #99cefc;
background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}
li {
list-style-type: none;
}
.beforenum{
display:none;}
.pagination8{display:none;}
.pagination9{display:none;}
.pagination6{display:none;}
.pagination7{display:none;}
.beforenum,.afternum{
float: left;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
<div class="content">1 I have some content</div>
<div class="content">2 I have some content</div>
<div class="content">3 I have some content</div>
<div class="content">4 I have some content</div>
<div class="content">5 I have some content</div>
<div class="content">6 I have some content</div>
<div class="content">7 I have some content</div>
<div class="content">8 I have some content</div>
<div class="content">9 I have some content</div>
<div class="content">10 I have some content</div>
<div class="content">11 I have some content</div>
<div class="content">12 I have some content</div>
<div class="content">13 I have some content</div>
<div class="content">14 I have some content</div>
<div class="content">15 I have some content</div>
<div class="content">16 I have some content</div>
<div class="content">17 I have some content</div>
<div class="content">18 I have some content</div>
<div class="content">19 I have some content</div>
<div class="content">20 I have some content</div>
<div class="content">21 I have some content</div>
<div class="content">22 I have some content</div>
<div class="content">23 I have some content</div>
<div class="content">24 I have some content</div>
</div>
<div id="pagin">
<ul>
<li>
<a href="#" id="prev">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
</svg>
</a>
</li>
<li class="pagination1"><a class="page current" href="#">1</a></li>
<li class="beforenum"><a class="" href="#" >...</a></li>
<li class="pagination2"><a class="page" href="#">2</a></li>
<li class="pagination3"><a class="page" href="#">3</a></li>
<li class="pagination4"><a class="page" href="#">4</a></li>
<li class="pagination5"><a class="page" href="#">5</a></li>
<li class="pagination6"><a class="page" href="#">6</a></li>
<li class="pagination7"><a class="page" href="#">7</a></li>
<li class="afternum"><a class="" href="#" >...</a></li>
<li class="pagination8"><a class="page" href="#">8</a></li>
<li class="pagination9"><a class="page" href="#">9</a></li>
<li class="pagination10"><a class="page" href="#">10</a></li>
<li>
<a href="#" id="next">
<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
</svg>
</a>
</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478980.html
標籤：jQuery