如何为菜单中指向当前页面的<li>或<a>元素设置特殊颜色？

给你几个实用的实现思路，根据你的页面场景选就行：

1. 静态页面手动加类（最简单） #

直接在当前页面（比如experiencia页面）的HTML里，给对应的菜单项加个自定义类（比如active），再用CSS设置这个类的颜色。

HTML代码示例：

<ul class="menu">
  <li><a href="index.html">首页</a></li>
  <li class="active"><a href="experiencia.html">Experiencia</a></li>
  <li><a href="otros.html">其他页面</a></li>
</ul>

CSS代码示例：

/* 给<li>设置高亮颜色 */
.menu .active {
  color: #ff4500; /* 换成你想要的颜色 */
}
/* 如果要给<a>单独设置 */
.menu .active a {
  color: #ff4500;
}

2. 服务器端动态加类（后端驱动页面） #

如果你的页面是后端渲染的（比如PHP、Node.js），可以判断当前页面标识，自动给对应菜单项加类。以PHP为例：

<?php
// 假设当前页面标识是'experiencia'
$currentPage = 'experiencia';
?>

<ul class="menu">
  <li <?php echo $currentPage == 'index' ? 'class="active"' : ''; ?>>
    <a href="index.html">首页</a>
  </li>
  <li <?php echo $currentPage == 'experiencia' ? 'class="active"' : ''; ?>>
    <a href="experiencia.html">Experiencia</a>
  </li>
  <li <?php echo $currentPage == 'otros' ? 'class="active"' : ''; ?>>
    <a href="otros.html">其他页面</a>
  </li>
</ul>

CSS部分和上面一样，设置active类的颜色即可。

3. JavaScript自动匹配（纯前端动态场景） #

如果是单页应用或者不想手动改每个页面，用JS自动识别当前页面路径，给对应菜单项加类：

// 获取当前页面的路径
const currentPath = window.location.pathname;

// 遍历所有菜单链接
document.querySelectorAll('.menu a').forEach(link => {
  // 匹配链接路径和当前页面路径
  if (link.pathname === currentPath) {
    // 给父元素<li>加active类
    link.parentElement.classList.add('active');
    // 也可以直接给<a>加类：link.classList.add('active');
  }
});

对应的CSS还是设置active类的颜色：

.menu .active {
  color: #ff4500;
}

内容的提问来源于stack exchange，提问作者Sebastian Espinal