如何用HTML或jQuery实现单页面内内容区切换（隐藏非目标内容）

首先你当前的代码存在两个问题：一是子菜单的HTML结构不规范（<a>直接包裹<li>不符合W3C标准），二是原生锚点仅做页面定位，不会自动隐藏其他内容。按以下步骤修改即可解决：

1. 修正HTML结构 #

调整子菜单的嵌套关系，给每个内容容器分配唯一ID，默认只显示第一个内容，其余初始隐藏：

<div class="sub-menu">
    <ul>
        <li><a href="#who-wrapper" class="current">Who We Are</a></li>
        <li><a href="#values-wrapper">Our Values</a></li>
        <li><a href="#history-wrapper">History & Structure</a></li>
    </ul>
</div>
<div class="wrapper">
    <!-- Who We Are 内容容器 -->
    <div id="who-wrapper" class="content-section who-body">
        <h3>Who We Are?</h3>
        <p>这里放置Who We Are的具体内容...</p>
    </div>
    <!-- Our Values 内容容器 -->
    <div id="values-wrapper" class="content-section" style="display: none;">
        <h3>Our Values</h3>
        <p>这里放置Our Values的具体内容...</p>
    </div>
    <!-- History & Structure 内容容器 -->
    <div id="history-wrapper" class="content-section" style="display: none;">
        <h3>History & Structure</h3>
        <p>这里放置History & Structure的具体内容...</p>
    </div>
</div>

2. 添加JavaScript控制显示切换 #

通过JS阻止锚点默认跳转行为，点击菜单时仅显示对应内容，隐藏其余内容：

// 获取所有子菜单链接和内容容器
const subLinks = document.querySelectorAll('.sub-menu a');
const contentSections = document.querySelectorAll('.content-section');

subLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        // 阻止锚点默认跳转行为
        e.preventDefault();
        // 提取目标容器的ID
        const targetId = this.getAttribute('href').substring(1);

        // 隐藏所有内容容器
        contentSections.forEach(section => {
            section.style.display = 'none';
        });
        // 显示目标内容容器
        document.getElementById(targetId).style.display = 'block';

        // 切换菜单激活状态（可选，提升用户体验）
        subLinks.forEach(l => l.classList.remove('current'));
        this.classList.add('current');

        // 平滑滚动到目标位置（可选）
        document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
    });
});

3. 可选：CSS优化激活样式 #

给当前选中的菜单选项添加样式，让用户清晰感知当前状态：

.sub-menu a.current {
    color: #2c3e50; /* 自定义激活状态颜色 */
    font-weight: 700;
    border-bottom: 2px solid #2c3e50;
}

修改完成后，点击子菜单的不同选项，即可在当前页面切换显示对应内容，完全不需要跳转到其他HTML文件。

内容的提问来源于stack exchange，提问作者2k adc