导航栏链接点击后无法保持绿色状态的问题求助

我最近在做一个简单的导航栏，想实现点击链接后让它保持绿色，但试了半天没成功。目前鼠标悬停的时候链接会正常变成绿色，可点击后没办法维持这个绿色状态；而且我还希望切换到其他链接时，新点击的链接变绿，之前的恢复白色。

下面是我目前写的HTML和CSS代码：

我的CSS代码 #

body { background-color: black;}
nav {
  display: flex;
  justify-content: center;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
}

.nav-link {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}

.nav-link:hover {
  color: #32CD32;
}

.nav-link:active {
  color: #32CD32;
}

我的HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"  />

<nav>
  <ul>
    <li><a class="nav-link" href="index.html"><i class="fa-solid fa-house"></i></a></li>
    <li><a class="nav-link" href="skills.html"><i class="fa-solid fa-tools"></i></a></li>
    <li><a class="nav-link" href="project.html"><i class="fa-solid fa-laptop-code"></i></a></li>
    <li><a class="nav-link" href="contact.html"><i class="fa-solid fa-paper-plane"></i></a></li>
  </ul>
</nav>

问题原因分析 #

你现在用的:active伪类只能表示鼠标按下链接的那一瞬间的状态，当页面跳转（或者鼠标松开后），这个状态就会消失，所以没法实现“点击后持久保持绿色”的效果。要实现持久的激活状态，我们需要用自定义的类来标记当前页面的导航链接。

解决方案 #

情况1：你的项目是多页面（每个链接对应单独的HTML文件）

这种情况最简单的方法是，在每个页面的对应导航链接上手动添加一个active类，然后在CSS里给这个类设置绿色样式。

比如：

• 在index.html（首页）中，给首页的链接加上active类：

<li><a class="nav-link active" href="index.html"><i class="fa-solid fa-house"></i></a></li>

• 在skills.html（技能页）中，给技能页的链接加上active类：

<li><a class="nav-link active" href="skills.html"><i class="fa-solid fa-tools"></i></a></li>

以此类推，其他页面的对应链接都这么处理。

然后在你的CSS里添加下面这段代码：

.nav-link.active {
  color: #32CD32;
}

这样每个页面打开时，对应导航链接就会保持绿色，切换页面时新页面的对应链接也会自动变绿。

情况2：如果是单页应用（不需要跳转页面）

如果你的项目是单页（点击链接不刷新跳转），可以用JavaScript来动态切换active类，不需要手动在每个页面修改：

首先保持HTML不变，然后修改CSS（加上.nav-link.active的样式），再添加一段JS代码：

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

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

这样点击不同链接时，就会自动切换激活状态的绿色样式啦。

备注：内容来源于stack exchange，提问作者Damilare Edun