点击分页按钮无法更新列表及切换按钮active状态求助

问题根源 #

1. 列表内容未同步更新：点击分页按钮时，仅处理了按钮的状态切换，没有触发列表的重新渲染，导致页面内容不变化。
2. 按钮选中样式失效：CSS中误用了:active伪类（这是元素被点击瞬间的状态），而我们需要的是标记当前选中页码的自定义.active类，所以选中按钮无法保持高亮。

修复步骤 #

1. 修正CSS样式

将分页按钮的选中样式从:active伪类改为自定义.active类：

/* 替换原有的.pagenumbers button:active */
.pagenumbers button.active{
    background-color: #07f848;
    box-shadow: inset 0px 0px 4px rgba(0,0,0,0.2); 
}

2. 完善JavaScript逻辑

在分页按钮的点击事件中，添加列表重新渲染的调用，确保页码切换时内容同步更新：

function PaginationButton(page, items){
    
    let button = document.createElement("button");
    
    button.innerText = page;
    if(current_page == page) button.classList.add("active");
    
    button.addEventListener("click", function(){
        current_page = page;

        let current_btn = document.querySelector(".pagenumbers button.active");
        current_btn.classList.remove("active");
        button.classList.add("active");
        
        // 新增：重新渲染当前页码对应的列表内容
        displayListOnScreen(list_items, list_element, rows, current_page);
    })

    return button;
}

修复效果 #

修改完成后，点击分页按钮：

• 选中的按钮会保持.active类定义的高亮样式
• 列表区域会自动加载并显示当前页码对应的内容

内容的提问来源于stack exchange，提问作者Avishek Sharma