下面我将从最简单到最专业的几种方法,为你详细讲解如何实现导航栏高亮。
（图片来源网络，侵删）
使用CSS的 target 伪类（简单但有限）
这种方法适用于单页应用，通过URL的哈希值（）来激活对应的导航项。
原理：当URL中的某个id被“定位”到时，target伪类就会匹配到这个元素。
示例代码：
HTML:
（图片来源网络，侵删）
<nav> <a href="#home">首页</a> <a href="#about">关于我们</a> <a href="#services">服务</a> <a href="#contact">联系我们</a> </nav> <!-- 页面内容部分 --> <section id="home">首页内容</section> <section id="about">关于我们内容</section> <section id="services">服务内容</section> <section id="contact">联系我们内容</section>
CSS:
/* 基础导航样式 */
nav a {
padding: 10px 20px;
text-decoration: none;
color: #333;
border-right: 1px solid #ccc;
}
/* 当链接指向的id成为页面目标时，高亮该链接 */
nav a:target {
background-color: #007bff;
color: white;
font-weight: bold;
}
优点：
- 纯CSS实现,无需JavaScript。
- 简单直接。
缺点：
- 仅适用于单页应用，对于多页面网站,页面刷新后高亮状态会丢失。
- 高亮依赖于URL中的,可能会影响页面滚动。
- 只能高亮被点击的链接本身，不能高亮其父级元素（如
<li>）。
使用JavaScript添加/移除类名（最常用、最灵活）
这是最主流、最可靠的方法，适用于任何类型的网站（单页或多页），它通过JavaScript来动态管理“激活”状态。
（图片来源网络，侵删）
原理：
- 在HTML中，给默认激活的导航项添加一个类名（
active）。 - 在CSS中，定义
.active类的样式。 - 用JavaScript监听所有导航项的点击事件。
- 点击时，移除所有导航项的
active类，然后只给被点击的项添加active类。
示例代码：
HTML:
<nav>
<ul>
<li><a href="index.html" class="active">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
CSS:
/* 基础导航样式 */
nav ul {
list-style: none;
padding: 0;
display: flex;
}
nav a {
display: block;
padding: 15px 25px;
text-decoration: none;
color: #555;
transition: color 0.3s, background-color 0.3s;
}
/* 鼠标悬停效果 */
nav a:hover {
color: #007bff;
}
/* 高亮激活状态 */
nav a.active {
background-color: #007bff;
color: white;
font-weight: bold;
}
JavaScript:
document.addEventListener('DOMContentLoaded', () => {
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link => {
link.addEventListener('click', function() {
// 1. 移除所有链接的 active 类
navLinks.forEach(l => l.classList.remove('active'));
// 2. 给被点击的链接添加 active 类
this.classList.add('active');
});
});
});
优点：
- 通用性强,适用于任何网站架构。
- 灵活性高，可以轻松扩展，比如结合路由管理器（如React Router, Vue Router）。
- 可以控制高亮样式的任何方面（颜色、边框、背景图等）。
缺点：
- 需要编写少量JavaScript代码。
使用HTML的 has() 伪类（现代CSS，未来趋势）
这是CSS的一个新特性，可以让我们选择包含特定子元素的父元素，它可以实现类似方法二的效果,但完全用CSS完成。
原理：利用 has() 选择器，让导航项（通常是<a>）的父级（如<li>）在选择器匹配时应用高亮样式。
示例代码：
HTML:
<nav>
<ul>
<li><a href="index.html" aria-current="page">首页</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="services.html">服务</a></li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
注意：这里我们使用
aria-current="page"属性来语义化地标记当前页面,这是Web无障碍的最佳实践。
CSS:
/* 基础导航样式 */
nav ul {
list-style: none;
padding: 0;
display: flex;
}
nav a {
display: block;
padding: 15px 25px;
text-decoration: none;
color: #555;
}
/* 当 <a> 标签有 [aria-current="page"] 属性时，高亮其父级 <li> */
nav li:has(a[aria-current="page"]) {
background-color: #007bff;
font-weight: bold;
}
/* 同时也高亮链接文字颜色 */
nav li:has(a[aria-current="page"]) a {
color: white;
}
优点：
- 纯CSS实现,代码更简洁。
- 语义化好，使用了
aria-current属性。
缺点：
- 浏览器兼容性：
has()伪类在较旧的浏览器（如旧版Edge、IE）中不被支持，但对于现代项目来说,这是一个非常强大的工具。
总结与推荐
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
target 伪类 |
纯CSS，简单 | 仅限单页，依赖URL，功能有限 | 简单的单页展示网站 |
| JavaScript + 类名 | 最灵活、最通用、兼容性好 | 需要少量JS | 绝大多数网站，尤其是多页面网站和SPA |
has() 伪类 |
纯CSS，语义化好，代码优雅 | 浏览器兼容性差 | 现代项目，且用户都使用新版浏览器 |
我的建议是：
- 对于初学者或传统多页面网站：强烈推荐方法二（JavaScript + 类名），它是最稳定、最可靠、最容易理解的方案。
- 对于追求前沿技术且用户群体较新的现代项目：可以考虑使用方法三（
has()伪类），因为它能让你的代码更优雅、更纯粹。 - 对于非常简单的单页应用或纯CSS练习：可以尝试方法一（
target伪类）,了解其原理。
希望这些解释能帮助你实现完美的导航栏高亮效果！
