我正在从头开始构建分页系统，如果当前页面位于第一个<，则希望协助停用'下一个/上一个'切换/ strong>或最后标记（通过 jQuery 解决方案中的首选项）。此外，如果当前页面已更改，我需要有关启用开关的帮助：
上一页
我在搜索这个问题时遇到了困难，因为每一个涉及到这个问题都与'DataTables'有关，我现在不想这样做。
的 HTML：
<div class="row medium-8 large-7 columns beR_blog">
<div class="beR_blog-page first" style="display: none;"></div>
<div id="unique-entry-id-24" class="blog-entry blog-post"></div>
<div id="unique-entry-id-5" class="blog-entry blog-post"></div>
<div id="unique-entry-id-15" class="blog-entry blog-post"></div>
<div id="unique-entry-id-21" class="blog-entry blog-post"></div>
<div id="unique-entry-id-4" class="blog-entry blog-post"></div>
</div>
<div class="beR_blog-page first" style="display: none;"></div>
<div id="unique-entry-id-24" class="blog-entry blog-post"></div>
<div id="unique-entry-id-5" class="blog-entry blog-post"></div>
<div id="unique-entry-id-15" class="blog-entry blog-post"></div>
<div id="unique-entry-id-21" class="blog-entry blog-post"></div>
<div id="unique-entry-id-4" class="blog-entry blog-post"></div>
</div>
<div class="beR_blog-page first" style="display: none;"></div>
<div id="unique-entry-id-24" class="blog-entry blog-post"></div>
<div id="unique-entry-id-5" class="blog-entry blog-post"></div>
<div id="unique-entry-id-15" class="blog-entry blog-post"></div>
<div id="unique-entry-id-21" class="blog-entry blog-post"></div>
<div id="unique-entry-id-4" class="blog-entry blog-post"></div>
</div>
<div class="beR_blog-page last" style="display: none;"></div>
<div id="unique-entry-id-24" class="blog-entry blog-post"></div>
<div id="unique-entry-id-5" class="blog-entry blog-post"></div>
<div id="unique-entry-id-15" class="blog-entry blog-post"></div>
<div id="unique-entry-id-21" class="blog-entry blog-post"></div>
<div id="unique-entry-id-4" class="blog-entry blog-post"></div>
</div>
</div>
<ul class="pagination text-center" role="navigation" aria-label="Pagination">
<li class="pagination-previous">
<a href="#" aria-label="Previous page">Previous <span class="show-for-sr">page</span></a>
</li>
<li>
<a href="#" class="test-pagination current" rel="0">1 (Current)</a>
</li>
<li>
<a href="#" class="test-pagination" rel="1">2</a>
</li>
<li>
<a href="#" class="test-pagination" rel="2">3</a>
</li>
<li>
<a href="#" class="test-pagination" rel="3">4</a>
</li>
<li class="pagination-next">
<a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a>
</li>
</ul>
jQuery的：
$('.pagination-next a').click(function(){
if ($('.beR_blog-page:visible').next().length != 0) {
$('.beR_blog-page:visible').next().show().prev().hide();
} else {
$('.beR_blog-page:visible').hide();
$('.beR_blog-page:first').show();
}
if ($('.pagination li a.current').parent().is(':first-child')) {
$('.pagination li a.current').removeClass('current');
$('.pagination li:first-child').children().addClass('current');
} else {
$('.pagination li a.current').parent().next().children().addClass('current').addClass('new');
$('.pagination li a.current').removeClass('current');
$('.pagination li a.new').addClass('current').removeClass('new');
}
$('html, body').animate({ scrollTop: 0 }, 0);
return false;
});
$('.pagination-previous a').click(function(){
if ($('.beR_blog-page:visible').prev().length != 0) {
$('.beR_blog-page:visible').prev().show().next().hide();
} else {
$('.beR_blog-page:visible').hide();
$('.beR_blog-page:last').show();
}
if ($('.pagination li a.current').parent().is(':last-child')) {
$('.pagination li a.current').removeClass('current');
$('.pagination li:last-child').children().addClass('current');
} else {
$('.pagination li a.current').parent().prev().children().addClass('current').addClass('new');
$('.pagination li a.current').removeClass('current');
$('.pagination li a.new').addClass('current').removeClass('new');
}
$('html, body').animate({ scrollTop: 0 }, 0);
return false;
});
答案 0 :(得分：0)
这是一个关于如何根据分页标记中存在的活动类启用和禁用按钮的小型演示：
https://jsfiddle.net/h3Lcto56/
基本上，这是重要的部分：
JS
@set＆＃34;如果索引0中的元素是活动元素，那么我们就在第一页中，因此我们无法返回＆＃34;
＆＃34;如果最后一个索引中的元素是活动元素，那么我们就在最后一页，因此我们无法前进。＆＃34;
＆＃34;否则，我们处于中间页面，因此我们可以采用任何一种方式。＆＃34;