如何用CSS实现导航栏当前活跃点击链接的颜色切换？

嘿，我来帮你搞定这个导航栏活跃链接变色的问题！你提到的那些伪类之所以没达到预期效果，我先给你拆解下原因：

• :hover/:focus只有鼠标悬停或链接获得焦点时生效，点击后就会恢复原样；
• :visited是标记已经访问过的链接，一旦访问就永久保持样式，没法实现点击切换的动态效果；
• :target虽然能匹配URL锚点对应的元素，但它依赖页面中存在对应ID的内容区域，而且刷新后状态会锚定在当前位置，灵活性不够。

下面给你两种实用的解决方案，按需选择：

方案一：纯CSS实现（依赖锚点元素） #

如果你的页面每个导航链接对应一个带ID的内容区块，可以用:target伪类来实现。

调整后的HTML #

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<!-- 对应每个导航的内容区块，必须有匹配的ID -->
<div id="home" class="content">Home 页面内容</div>
<div id="news" class="content">News 页面内容</div>
<div id="contact" class="content">Contact 页面内容</div>
<div id="about" class="content">About 页面内容</div>

CSS 样式 #

/* 默认导航链接样式 */
.nav li a {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
}

/* 当内容区块被锚点定位时，对应导航链接变色 */
#home:target ~ .nav li a[href="#home"],
#news:target ~ .nav li a[href="#news"],
#contact:target ~ .nav li a[href="#contact"],
#about:target ~ .nav li a[href="#about"] {
  color: #ff6347; /* 自定义活跃颜色 */
  font-weight: bold;
}

⚠️ 注意：这个方案要求内容区块在导航栏的前面（利用兄弟选择器~），而且URL会带上锚点，刷新后会直接跳转到对应内容区域。如果你的页面没有对应内容区块，这个方案就不适用。

方案二：JavaScript实现（灵活通用，推荐） #

这是最常用的方案，完全不受页面结构限制，能精准控制活跃链接的切换。

调整后的HTML #

<ul class="nav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

CSS 样式 #

/* 默认导航链接样式 */
.nav li a {
  color: #333;
  text-decoration: none;
  padding: 8px 16px;
  transition: color 0.2s; /* 可选：添加颜色过渡动画 */
}

/* 活跃链接的样式 */
.nav li a.active {
  color: #ff6347;
  font-weight: bold;
  border-bottom: 2px solid #ff6347; /* 可选：加个底部下划线增强视觉效果 */
}

JavaScript 代码 #

// 获取所有导航链接
const navLinks = document.querySelectorAll('.nav li a');

// 给每个链接添加点击事件
navLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 先移除所有链接的active类
    navLinks.forEach(item => item.classList.remove('active'));
    // 给当前点击的链接添加active类
    this.classList.add('active');
  });
});

// 页面加载时，默认设置初始活跃状态（可选）
document.addEventListener('DOMContentLoaded', () => {
  // 可以根据当前URL的锚点自动匹配活跃链接
  const currentHash = window.location.hash || '#home';
  const activeLink = document.querySelector(`.nav li a[href="${currentHash}"]`);
  if (activeLink) {
    activeLink.classList.add('active');
  }
});

这个方案的优势：

• 点击任意链接都会立即切换活跃样式，不受页面结构影响；
• 可以自定义初始活跃状态（比如根据URL锚点设置）；
• 样式完全由CSS控制，方便修改调整。

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