网站导航栏特定页面菜单项颜色修改方法咨询

你已经在首页导航项里加了active类，只需要给这个类添加专属CSS样式，就能单独让当前页面的菜单项颜色变暗，不会影响整个导航列表。以下是具体操作步骤：

1. 修复原CSS的语法错误 #

你的原CSS代码里@keyframes example部分缺少闭合大括号和正确的分号，先补上避免样式失效：

@keyframes example {
  0%   {color: #DBDBDB;}
  100% {color: #622cd8;}
}

2. 添加active类的专属样式 #

在CSS末尾新增代码，给带有active类的导航项设置变暗的颜色：

li a.active {
  color: #888888; /* 这个颜色比默认的#DBDBDB更暗，可根据需求调整 */
}

如果需要更明显的视觉区分，还可以加个浅背景：

li a.active {
  color: #888888;
  background-color: rgba(255,255,255,0.1); /* 半透明白色背景，增强辨识度 */
}

3. 给每个页面的对应导航项加active类 #

比如在about.html页面中，导航栏代码要改成：

<ul>
  <li><a href="home.html">.home()</a></li>
  <li><a class="active" href="#news">.about()</a></li>
  <li><a href="#contact">.stuff()</a></li>
  <li><a href="#about">.apply()</a></li>
</ul>

同理，stuff.html和apply.html页面里，对应菜单项也要加上class="active"。

修改后的完整CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');

html body{
  background: #0E1212;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
  font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #682AE9;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes example {
  0%   {color: #DBDBDB;}
  100% {color: #622cd8;}
}

/* 新增的当前页面导航项样式 */
li a.active {
  color: #888888;
}

设置完成后，用户打开哪个页面，该页面对应的导航项就会显示变暗的颜色，其他导航项不受影响。

内容的提问来源于stack exchange，提问作者Brady Hirschey