如何实现点击分页按钮切换表格显示并解决初始多表展示问题

看起来你遇到了分页表格的两个典型问题：初始加载时两个表格同时显示，设置display:none后切换按钮又无法正常唤起第二个表格。别担心，咱们一步步来修复它：

问题根源分析 #

1. 初始状态下没有默认隐藏非活跃表格，导致两个表格同时渲染展示。
2. 直接给所有.tabcontent设置display:none后，你的切换逻辑可能没有正确将目标表格的display属性重置为可见状态，或者逻辑依赖的初始状态不符合预期。

修复方案：使用CSS类控制显示状态 #

我们可以通过添加/移除活跃类的方式来管理表格的显示，这种方式比直接操作display属性更清晰，也更容易维护。

步骤1：修改CSS样式 #

添加以下CSS，默认隐藏所有表格，仅给带有.active类的表格设置可见：

.tabcontent {
    display: none; /* 默认隐藏所有表格 */
}
.tabcontent.active {
    display: block; /* 活跃表格显示 */
}

步骤2：调整HTML结构 #

给第一个表格添加.active类，让它在页面初始化时默认显示；同时补全你未写完的第二个表格内容：

<div id="tabla1" class="tabcontent active">
    <div class="table-responsive my-3">
        <table class="table table-striped table-hover my-2" style="background-color: #f5f6fa">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Faculty</th>
                    <th></th>
                    <th>Progress of<br>donations</th>
                </tr>
            </thead>
            <tbody>
                <!-- 第一个表格的行内容 -->
                <tr>
                    <td>1</td>
                    <td>Mary</td>
                    <td>FCQI</td>
                    <td>
                        <center>
                            <button type="button" class="btn btn-primary btn-sm">Donar</button>
                        </center>
                    </td>
                    <th>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
                        </div>
                    </th>
                </tr>
                <!-- 其他行省略 -->
            </tbody>
        </table>
    </div>
</div>
<div id="tabla2" class="tabcontent">
    <div class="table-responsive2 my-3">
        <table class="table table-striped table-hover my-2" style="background-color: #f5f6fa">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Faculty</th>
                    <th></th>
                    <th>Progress of<br>donations</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mary</td>
                    <td>FCQI</td>
                    <td>
                        <center>
                            <button type="button" class="btn btn-primary btn-sm">Donar</button>
                        </center>
                    </td>
                    <th>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:60%"></div>
                        </div>
                    </th>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Mary</td>
                    <td>FCQI</td>
                    <td>
                        <center>
                            <button type="button" class="btn btn-primary btn-sm">Donar</button>
                        </center>
                    </td>
                    <th>
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:20%"></div>
                        </div>
                    </th>
                </tr>
                <!-- 可继续添加更多行 -->
            </tbody>
        </table>
    </div>
</div>

步骤3：完善JavaScript切换逻辑 #

添加以下JS代码，给分页按钮绑定点击事件，通过切换.active类来控制表格显示：

// 获取所有分页按钮（假设按钮有.pagination-btn类）
const paginationBtns = document.querySelectorAll('.pagination-btn');
const tabContents = document.querySelectorAll('.tabcontent');

paginationBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        // 通过按钮的data-target属性获取目标表格ID
        const targetTabId = this.dataset.target;
        
        // 移除所有表格的active类
        tabContents.forEach(tab => tab.classList.remove('active'));
        
        // 给目标表格添加active类，使其显示
        document.getElementById(targetTabId).classList.add('active');
    });
});

同时给你的分页按钮添加data-target属性和对应类：

<!-- 示例分页按钮 -->
<button class="pagination-btn" data-target="tabla1">1</button>
<button class="pagination-btn" data-target="tabla2">2</button>
<button class="pagination-btn" data-target="tabla1">&lt;</button>

为什么这个方案有效？ #

• 初始状态通过.active类确保只有第一个表格显示，其他表格默认隐藏，解决了初始同时显示的问题。
• 切换时通过类的添加/移除控制显示，避免了直接操作display属性可能带来的逻辑冲突，也让代码更易读和维护。

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