Saturday, 31 August 2013

Jquery pagination - Applying class to items

Jquery pagination - Applying class to items

I am trying to design a pagination system in Jquery. The bit I am stuck on
is when I click on different page number links, I want it to move the
"active" class to the newly clicked page.
In the example page "1" has the active class. When I click "2" I want the
active class to move to "2" and be removed from "1".
http://jsfiddle.net/qKyNL/24/
$('a').click(function(event){
event.preventDefault();
var number = $(this).attr('href');
$.ajax({
url: "/ajax_json_echo/",
type: "GET",
dataType: "json",
timeout: 5000,
beforeSend: function () {
$('#content').fadeTo(500, 0.5);
},
success: function (data, textStatus) {
// TO DO: Load in new content
$('html, body').animate({
scrollTop: '0px'
}, 300);
// TO DO: Change URL
// TO DO: Set number as active class
},
error: function (x, t, m) {
if (t === "timeout") {
alert("Request timeout");
} else {
alert('Request error');
}
},
complete: function () {
$('#content').fadeTo(500, 1);
}
});
});
I'm quite new to Jqeury and could do with some help. Can anyone please
give me some guidance on how to do this?

No comments:

Post a Comment