Grid布局切换异常：点击按钮后目标Grid未显示问题排查

你的代码点击后目标Grid无法显示的核心原因是点击事件的参数传递与函数接收不匹配：

• 按钮的onclick绑定写的是openArea(event,'ABC')，传递了两个参数，但openArea函数只定义了一个参数areaName，此时areaName实际接收的是event对象，而非目标区域的ID字符串。
• 这导致document.getElementById(areaName)找不到对应的DOM元素，自然无法将其设置为display: grid。

修复方案 #

方案1：修正参数匹配 #

修改openArea函数，让它接收两个参数（对应你传递的event和areaName），保证参数位置对应：

function openArea(event, areaName) {
    var i;
    var x = document.getElementsByClassName("Function");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    document.getElementById(areaName).style.display = "grid";
}

方案2：简化参数（更推荐） #

既然你没用到event参数，直接去掉它，同时修改按钮的点击绑定：

修正后的JavaScript

function openArea(areaName) {
    // 用更现代的方式遍历隐藏所有Function元素
    document.querySelectorAll(".Function").forEach(item => {
        item.style.display = "none";
    });
    // 显示目标区域
    document.getElementById(areaName).style.display = "grid";
}

修正后的HTML按钮部分

<div class="nav-bar">
    <button class="area" onclick="openArea('ABC')">ABC Tab</button>
    <button class="area" onclick="openArea('XYZ')">XYZ Tab</button>
    <button class="area" onclick="openArea('PRP')">PRP Tab</button>
</div>

额外优化点 #

你的XYZ和PRP区域style里重复写了display: grid;和display:none，浏览器会优先取后面的属性值，虽然不影响功能，但可以清理冗余代码：

<div id="XYZ" class="Function" style="grid-template-columns: 250px 250px 250px 250px; grid-template-rows: 250px 250px; display:none">
<!-- 移除重复的display: grid -->

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