如何使用纯 HTML/CSS 实现单页内容切换菜单-html教程-PHP中文网

如何使用纯 HTML/CSS 实现单页内容切换菜单

通过 CSS :target 伪类配合锚点链接，可在不依赖 JavaScript 的前提下，实现单页中点击菜单项动态显示对应内容、隐藏其他内容的效果。

通过 css `:target` 伪类配合锚点链接，可在不依赖 javascript 的前提下，实现单页中点击菜单项动态显示对应内容、隐藏其他内容的效果。

在构建轻量级单页应用（SPA）或静态介绍页时，常需避免页面跳转或外部依赖，仅用 HTML 和 CSS 实现“标签式”内容切换——例如点击「About」显示关于信息，点击「Contact」则仅显示联系方式，其余内容自动隐藏。这完全可通过浏览器原生支持的 :target 伪类实现，无需任何脚本。

核心原理是：当 URL 中包含片段标识符（如 #about），且页面存在对应 id="about" 的元素时，该元素即成为目标元素（target element），CSS 中的 :target 选择器便会精准匹配它。

✅ 正确实现方式如下：



  <meta charset="UTF-8"><title>单页内容切换</title><style>
    /* 默认隐藏所有内容区块 */
    .section { display: none; }

    /* 当该元素成为 URL 片段目标时显示 */
    .section:target { display: block; }

    /* 可选：为提升体验，添加平滑过渡（注意：display 不支持过渡，可配合 opacity + visibility） */
    .section {
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .section:target {
      opacity: 1;
      visibility: visible;
      display: block; /* display 仍需设为 block 以确保布局生效 */
    }

    /* 基础导航样式 */
    nav { margin-bottom: 20px; }
    nav a {
      display: inline-block;
      padding: 8px 16px;
      margin-right: 8px;
      text-decoration: none;
      background: #007bff;
      color: white;
      border-radius: 4px;
    }
    nav a:hover { background: #0056b3; }
  </style><nav><a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#home">Home</a>
</nav><!-- 默认不显示，仅当前 :target 匹配时可见 --><div id="home" class="section">
  <h2>Welcome</h2>
  <p>This is the homepage — shown by default if no hash is present.</p>
</div>

<div id="about" class="section">
  <h2>About Us</h2>
  <p>We build clean, semantic, and accessible web interfaces using native web technologies.</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
														src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
													<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</div>

<div id="contact" class="section">
  <h2>Contact</h2>
  <p>Email: hello@example.com<br>Phone: +86 138 0013 8000</p>
</div>

⚠️ 注意事项：

:target 仅响应 URL 片段变化（即 #xxx），不会响应 :active 或 :hover 等临时状态——因此原问题中误用 :active 是无效的。
初始加载时若 URL 无哈希（如 index.html），则无元素被 :target 匹配，所有 .section 均隐藏。如需默认显示某区块（如 #home），可：
- 在 HTML 中添加 <script>location.hash = '#home'</script>（但违反“纯 CSS”要求）；
- 或更优雅地：将默认内容不套用 .section 类，单独设置为 display: block，其余按规则控制。
display 属性本身不支持 CSS 过渡动画，若需淡入效果，请搭配 opacity 和 visibility（如示例所示），并确保 display 始终设为 block（或所需值）以维持布局流。