答案是使用CSS通过手动添加active类实现导航高亮。首先构建包含active类的HTML导航结构，再用CSS定义默认与高亮样式，结合:hover和.active状态设置背景色及文字颜色，最后在不同页面中为对应链接添加active类以标识当前页，适用于静态网站且无需JavaScript。
在CSS初级项目实战中，实现导航菜单高亮是一个常见需求，通常用于标识当前用户所在的页面。这个效果不需要JavaScript，仅用HTML和CSS就能完成，关键是利用链接的锚点或当前页面的URL匹配来触发样式变化。
1. 基本结构：HTML导航菜单
先构建一个简单的水平导航菜单：
这里给“首页”链接加上 active 类，表示当前页。
2. 样式设计：基础与高亮效果
使用CSS设置默认样式，并定义高亮状态：
立即学习“前端免费学习笔记（深入）”；
.navbar {
display: flex;
gap: 20px;
padding: 10px;
background-color: #f4f4f4;
}
.nav-link {
text-decoration: none;
color: #333;
padding: 8px 12px;
border-radius: 4px;
transition: background-color 0.3s;
}
.nav-link:hover {
background-color: #ddd;
}
.nav-link.active {
background-color: #007bff;
color: white;
}
关键点是 .nav-link.active 这个类，它让当前页面对应的菜单项变蓝并反白文字。
3. 页面间切换时手动添加 active 类
由于纯CSS无法自动检测当前页面，所以在每个HTML文件中，需要手动为对应菜单项添加 active 类：
- 在 about.html 中，将“关于我们”的 class="nav-link active"
- 其他链接去掉 active 类
这是静态网站中最简单可靠的实现方式，适合初学者掌握结构和样式控制。
4. 可选优化：使用 :target 或锚点高亮
如果菜单用于页面内跳转（如带锚点的单页），可以用 :target 实现自动高亮：
.section {
display: none;
}
.section:target {
display: block;
}
.section:target .nav-link {
background-color: #007bff;
color: white;
}
这种方式适用于单页应用内的导航，点击锚点后目标区域激活，样式随之改变。
基本上就这些。手动管理 active 类是初级项目中最实用的方法，理解它有助于后续学习JavaScript动态控制菜单。不复杂但容易忽略细节，比如过渡动画和可访问性。保持结构清晰，样式解耦，就能写出干净的导航高亮效果。
