仅使用 HTML 锚点与 CSS :target 伪类，即可在单个 HTML 文件中实现点击菜单项显示对应隐藏内容、其余内容自动隐藏的交互效果，无需任何 JavaScript。

仅使用 html 锚点与 css `:target` 伪类，即可在单个 html 文件中实现点击菜单项显示对应隐藏内容、其余内容自动隐藏的交互效果，无需任何 javascript。

在构建轻量级单页展示页（如个人简介、作品集首页或产品功能概览）时，常需避免页面跳转或滚动浏览，而是通过顶部导航栏一键切换不同模块内容——所有内容共存于同一 HTML 文件中，但仅当前选中模块可见。这种效果完全可通过原生 HTML + CSS 实现，核心在于利用 :target 伪类：它会在 URL 哈希（#xxx）匹配某个元素 id 时，精准选中该元素。

实现步骤如下：

1. 结构化导航与内容区块
   使用 <nav></nav> 定义菜单，每个 <a></a> 的 href 指向目标内容的 id（如 https://www.php.cn/link/58f5494e7f958bdb46d4f26821bf1106）；内容区使用 <div> 并赋予对应 <code>id，统一添加 class="section" 便于样式控制。

2. CSS 控制显隐逻辑
   默认隐藏所有 .section，仅当其成为当前 URL 目标（即被 :target 匹配）时显示：

.section {
  display: none;
}
.section:target {
  display: block;
}

3. 完整示例代码

   <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
   <meta charset="UTF-8">
   <title>单页内容切换</title>
   <style>
    .section { display: none; padding: 20px; border: 1px solid #eee; }
    .section:target { display: block; background: #f9f9f9; }
    nav { margin-bottom: 20px; }
    nav a { margin-right: 15px; text-decoration: none; color: #007bff; }
   </style>
   </head>
   <body>

首页关于我技能联系

欢迎来到我的主页

这是默认展示区域。点击上方菜单切换内容。



Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

关于我

一名专注前端体验的开发者，热爱简洁、可访问的 Web 解决方案。

立即学习“Java免费学习笔记（深入）”；

技能清单

• HTML5 / CSS3
• 响应式设计
• 无障碍（a11y）实践

联系我

邮箱：hello@example.com