CSS标签切换高亮怎么实现

本文深入解析了如何利用CSS的`:target`伪类实现标签切换时的内容区块高亮，并明确指出其天然局限——无法直接高亮导航标签本身，因为CSS不支持从目标内容反向样式化对应的链接标签；文章提供了纯CSS方案（仅高亮当前激活的内容区）和轻量JavaScript方案（通过监听`hashchange`事件动态添加`.active`类来精准控制标签高亮），兼顾简洁性与实用性，帮助开发者根据实际需求选择最合适的实现路径。

用 :target 伪类实现标签切换时高亮当前项，前提是每个标签对应一个带 id 的区块，且通过锚点链接跳转。它本身不控制“标签”的选中状态，而是响应 URL 中的 fragment（即 #xxx）自动匹配目标元素。

前提：结构要符合锚点跳转逻辑

确保你的标签是超链接，href 指向对应内容块的 id：

<nav>
  <a href="#section1">标签一</a>
  <a href="#section2">标签二</a>
  <a href="#section3">标签三</a>
</nav>

<section id="section1">内容一</section>
<section id="section2">内容二</section>
<section id="section3">内容三</section>

用 :target 配合标签实现高亮

:target 作用于被 URL fragment 选中的元素（比如 #section2 对应 section#section2），但你想高亮的是 对应的标签链接，不是内容块本身。CSS 无法反向从 section:target 去样式化前面的 a（不支持父选择器或跨兄弟选择）。所以需借助间接方式：

• 给每个 a 添加与目标 id 对应的 data-target 属性
• 利用 URL fragment 变化 + JavaScript 监听 hashchange，动态添加 .active 类
• 纯 CSS 方案只能高亮 section:target，不能直接高亮 a

纯 CSS 可行的高亮方式（仅限内容块）

如果只需视觉上突出当前展示的内容区，直接写：

section:target {
  background-color: #f0f8ff;
  padding: 1rem;
  border-left: 4px solid #4a90e2;
}

这样点击标签后，对应 section 就会高亮——这是 :target 最标准、无需 JS 的用法。

想高亮标签本身？推荐轻量 JS 方案

监听地址栏 hash 变化，更新 a 的状态：

<script>
function setActiveTab() {
  const hash = location.hash.slice(1);
  document.querySelectorAll('nav a').forEach(a => {
    a.classList.toggle('active', a.getAttribute('href') === `#${hash}`);
  });
}
window.addEventListener('hashchange', setActiveTab);
setActiveTab(); // 初始化
</script>

CSS 补一句：

nav a.active { color: #4a90e2; font-weight: bold; }

基本上就这些。:target 很干净，但有局限；真要操作导航项状态，JS 是更自然、可控的选择。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~