$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
$pageItem.removeClass("active");
$(this).addClass("active");
});
});<script src=".11.1/jquery.min.js"></script>
<link href=".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>
$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
$pageItem.removeClass("active");
$(this).addClass("active");
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>Now, I am using bootstrap pagination and add some customise feature using jQuery to make page "active" when I click on it which mean current page.
However, the "prev" and "next" button will be also "active". What can I do to only switch page "active" when click on "prev" or "next" button and not to add "active" to "prev" and "next" button.
Share Improve this question asked Jul 17, 2015 at 18:50 DreamsDreams 8,51611 gold badges50 silver badges73 bronze badges3 Answers
Reset to default 4Add a class to the previous and next buttons i.e. list items in your case and use .not() to exclude them.
$(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./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>You just need to add simply if condition for Next and Prev buttons
$(document).ready(function(){
var $pageItem = $(".pagination li")
$pageItem.click(function(){
console.log($(this).html().indexOf('Next'));
if($(this).html().indexOf('Next') <= -1 && $(this).html().indexOf('Previous') <= -1){
$pageItem.removeClass("active");
$(this).addClass("active");
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./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>This code will redirect to next and previous urls test it with actual links in your project.
$(document).on('click', '.prev', function () {
//1- get first element to check if it has class 'active',
// to prevent class 'active' from moving to prev button on click,
// if explanation isn't clear try removing if(){} to see it.
const first = $(this).siblings().first();
if (!first.hasClass('active')) {
//2- search <li>'s to get the one that has 'active' class.
const active = $(this).siblings('.active');
//3- get the previous item of the <li class"active"> to move to.
const prevItem = active.prev();
//4- get href of the item to redirect to.
const link = prevItem.children('a').prop('href');
//5- remove 'active' class from the current <li> and give it to prev <li>.
active.removeClass('active');
prevItem.addClass('active');
//6- redirect to href of the new <li>.
window.location.href = link;
}
});
$(document).on('click', '.next', function () {
const last = $(this).siblings().last();
if (!last.hasClass('active')) {
const active = $(this).siblings('.active');
const nextItem = active.next();
const link = nextItem.children('a').prop('href');
active.removeClass('active');
nextItem.addClass('active');
window.location.href = link;
}
}); <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="d-flex justify-content-center">
<ul class="pagination pagination-lg">
<li class="page-item prev">
<a class="page-link">Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">2
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item next">
<a class="page-link">Next</a>
</li>
</ul>
</nav>