Question

我正在尝试在jQuery中设计一个分页系统。我坚持的一点是，当我点击不同的页码链接时，我希望它将“活动”类移动到新点击的页面。

在示例页面中，“1”具有活动类。当我点击“2”时，我希望活动类移动到“2”并从“1”移除。

$('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);
        }
    });    
});

我对jQuery很新，可以提供一些帮助。任何人都可以给我一些指导如何做到这一点？

Answer 1

您可以查看addClass方法here和removeClass方法here

Answer 2

删除当前活动的li并将活动类添加到您单击的活动类。在点击事件处理程序中添加这两行

$('#pagination li.active').removeClass("active");
$(this).parent().addClass("active");

jQuery分页 - 将类应用于项目

2 个答案: