如何让我的“上一页”和“下一页”按钮在分页上工作？
如何让我的“上一页”和“下一页”按钮在分页上工作？
提问于 2015-07-18 02:50:46
$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
$pageItem.removeClass("active");
$(this).addClass("active");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
现在，我使用bootstrap分页，并添加一些自定义功能使用jQuery使页面“活动”时，我点击它的意思是当前页面。
但是，“上一步”和“下一步”按钮也将处于“活动”状态。当点击“上一页”或“下一页”按钮时，我应该怎么做才能只切换“活动”页面，而不将“活动”页添加到“上一页”和“下一页”按钮。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-18 03:18:46
向“上一步”和“下一步”按钮添加一个类，即在您的案例中列出项目，并使用.not()排除它们。
$(document).ready(function() {
var pageItem = $(".pagination li").not(".prev,.next");
var prev = $(".pagination li.prev");
var next = $(".pagination li.next");
pageItem.click(function() {
pageItem.removeClass("active");
$(this).not(".prev,.next").addClass("active");
});
next.click(function() {
$('li.active').removeClass('active').next().addClass('active');
});
prev.click(function() {
$('li.active').removeClass('active').prev().addClass('active');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav>
<ul class="pagination">
<li class="prev">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a>
</li>
<li><a href="#">2</a>
</li>
<li><a href="#">3</a>
</li>
<li><a href="#">4</a>
</li>
<li><a href="#">5</a>
</li>
<li class="next">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31482739
复制相关文章
相似问题
腾讯云开发者
