调用 `window.location.reload()` 后立即修改 dom 会导致样式更新失效，因为页面已开始重载；应避免在重载前执行 dom 操作，或改用纯前端切换逻辑替代强制刷新。
你的问题根源非常典型：在 window.location.reload() 之后仍试图操作 DOM 元素（如 tabPrincipal.style.display="none"），这些代码永远不会执行 —— 因为 reload() 是同步阻塞行为，会立即终止当前 JS 执行流并清空整个页面上下文。浏览器跳转到空白白屏状态，随后重新加载完整 HTML，而你期望的 DOM 切换逻辑早已被丢弃。
✅ 正确做法：不刷新，只切换
你不需要 reload() —— 只需动态切换两个
的显示状态，并确保后端数据（vistorias / historico）已在页面加载时一并注入（如你 PHP 模板中 for(...) { ?> 所示）。只要数据已存在 JavaScript 全局作用域中，完全可通过纯前端逻辑完成视图切换：// 确保元素已声明（推荐使用 document.getElementById 或 querySelector）
const tabPrincipal = document.getElementById('tabPrincipal');
const tabHistorico = document.getElementById('tabHistorico');
const btnHistorico = document.getElementById('btnHistorico');
function showHistorico() {
// ❌ 错误：reload() 后下面两行永不执行
// window.location.reload();
// tabPrincipal.style.display = "none";
// ✅ 正确：仅切换 display，并可选触发表格内容更新逻辑
tabPrincipal.style.display = 'none';
tabHistorico.style.display = 'table'; // 注意：table 元素建议用 'table' 而非 'block'
}
function showPrincipal() {
tabPrincipal.style.display = 'table';
tabHistorico.style.display = 'none';
}
// 推荐：用事件委托替代内联 onclick（更易维护）
btnHistorico.addEventListener('click', showHistorico);⚠️ 关键注意事项
-
display 值需匹配元素语义：
默认是 display: table，设为 'block' 可能破坏表格布局；应使用 'table' / 'none'。-
PHP 模板变量必须已渲染完成：你代码中的 = vistorias[i][j] ?> 和 = historico[i][j] ?> 是服务端渲染，在页面首次加载时已写死进 HTML。切换显示不会自动重新执行 PHP 循环 —— 这正是你误以为“必须 reload”的原因。
✅ 解决方案：将 vistorias 和 historico 数据以 JSON 形式嵌入页面（例如 <script>const VISTORIAS_DATA = <?= json_encode($vistorias) ?>;</script>），再用 JS 动态生成表格内容，实现真正无刷新更新。
-
避免内联 onclick：HTML 中 onclick="showHistorico()" 不利于解耦和调试，推荐用 addEventListener 绑定。
? 进阶建议：动态渲染表格（真正免刷新）
若需根据数据实时生成表格内容（而非依赖服务端静态输出），可封装渲染函数：
function renderTable(data, tableId) {
const table = document.getElementById(tableId);
const tbody = table.querySelector('tbody') || table;
tbody.innerHTML = data.map(row =>
`<tr><td>${row.map(cell => `<span>${cell}</span>`).join('')}</td></tr>`
).join('');
}
// 切换时动态填充
function showHistorico() {
renderTable(historico, 'tabHistorico');
tabPrincipal.style.display = 'none';
tabHistorico.style.display = 'table';
}? 总结：window.location.reload() 是重量级操作，仅适用于需要重置整个应用状态的场景。对于简单的视图切换，应优先采用 CSS 显示控制 + JS 数据驱动渲染 —— 更快、更稳定、用户体验更流畅。
