如何实现页面加载时显示overview区块，切换其他区块时隐藏它？

第一步：修正初始显示状态 #

你现在的overview区块加了style="display: none;"，这会让它默认隐藏，先把这个内联样式删掉，让页面加载时它自动显示：

<section id="overview">
    Test
    <p>Example</p>
</section>

第二步：实现切换隐藏逻辑 #

下面给两种常用的实现方案，根据你的区块切换方式选择：

方案1：点击其他区块触发隐藏 #

如果是通过点击其他区块来切换内容，给这些区块统一加个类名（比如content-block），然后用以下JS代码：

// 获取overview区块
const overview = document.getElementById('overview');
// 获取所有需要触发隐藏的其他区块
const otherBlocks = document.querySelectorAll('.content-block');

// 给每个区块绑定点击事件
otherBlocks.forEach(block => {
    block.addEventListener('click', () => {
        overview.style.display = 'none';
        // 可选：如果需要只显示当前点击的区块，加上下面两行
        otherBlocks.forEach(b => b.style.display = 'none');
        block.style.display = 'block';
    });
});

方案2：URL哈希变化触发隐藏 #

如果是通过URL哈希（比如#about、#projects）切换区块，用哈希监听来实现：

const overview = document.getElementById('overview');

// 页面加载时确保overview显示
window.onload = () => {
    overview.style.display = 'block';
};

// 监听哈希变化
window.onhashchange = () => {
    // 哈希不是#overview就隐藏它，否则显示
    overview.style.display = window.location.hash === '#overview' ? 'block' : 'none';
};

排查你之前代码无效的常见原因 #

• JS代码是否在DOM加载完成后执行？如果写在<head>里，要包在document.addEventListener('DOMContentLoaded', function() { ... })里
• 有没有选错元素？用console.log(overview)打印一下，看看是不是null，如果是就是选择器写错了
• 有没有其他CSS规则强制把overview设为display: none;？内联样式优先级最高，但如果有!important的CSS规则会覆盖JS设置

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