如何为分页组件的当前页码按钮添加active类实现样式定制？

要给当前选中的页码添加active类以实现样式定制，只需对现有代码做两处核心修改，再补充对应CSS样式即可：

1. 修改JavaScript代码 #

调整makePages函数 #

生成页码链接时，为初始的第1页默认添加active类：

function makePages(){
    $items = $(".filtered-div:visible");
    pages = Math.ceil($items.length / itemsNumber);
    $("#pages").empty();
    for(var p=1;p<=pages;p++){
          // 创建页码链接时判断是否为初始页，添加active类
          var $pageLink = $('<a href="#">'+p+'</a>');
          if(p === 1){
              $pageLink.addClass('active');
          }
          $("#pages").append($pageLink);
    }
    showPage(1);
}

更新showPage函数 #

每次切换页面时，先清除所有页码的active类，再给当前页码添加该类：

function showPage(page){
    $items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
    current = page;
    $("div.ctrl-nav a").show();
    
    // 切换页码的active状态
    $("#pages a").removeClass('active');
    $("#pages a:contains(" + page + ")").addClass('active');
    
    if(current == 1){
        $("div.ctrl-nav a:first").hide();
    }else if(current == pages){
        $("div.ctrl-nav a:last").hide();
    }
}

2. 添加CSS样式 #

根据需求定制active类的样式，示例如下：

#pages a.active {
    color: #fff;
    background-color: #007bff;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
}

修改后的完整JavaScript代码 #

var itemsNumber = 6, $items, pages = 1, current = 1;
function makePages(){
    $items = $(".filtered-div:visible");
    pages = Math.ceil($items.length / itemsNumber);
    $("#pages").empty();
    for(var p=1;p<=pages;p++){
          var $pageLink = $('<a href="#">'+p+'</a>');
          if(p === 1){
              $pageLink.addClass('active');
          }
          $("#pages").append($pageLink);
    }
    showPage(1);
}
function showPage(page){
    $items.hide().slice((page - 1) * itemsNumber, page * itemsNumber).show();
    current = page;
    $("div.ctrl-nav a").show();
    
    // 更新active类
    $("#pages a").removeClass('active');
    $("#pages a:contains(" + page + ")").addClass('active');
    
    if(current == 1){
        $("div.ctrl-nav a:first").hide();
    }else if(current == pages){
        $("div.ctrl-nav a:last").hide();
    }
}
makePages();
$("div.ctrl-nav").on('click', 'a', function(){
    var action = $(this).text();
    if(action == 'Précédent'){
        current--;
    }else if(action == 'Suivant'){
        current++;
    }else if(+action > 0){
        current = +action;
    }
    if(current <= 1){
        current = 1;
    }else if(current >= pages){
        current = pages;
    }
    showPage(current);
});

内容的提问来源于stack exchange，提问作者Sofia Lazrak