正确做法是使用类名如active配合CSS设置背景色高亮，1. 给当前页面链接添加class="active"并用CSS定义样式；2. :active伪类仅在点击时生效，不适合持久选中状态；3. 可结合:hover提升交互体验；4. 也可用JavaScript根据URL自动添加active类实现自动高亮。
导航菜单中让选中项高亮，通常不是用 :active 来实现的，因为 :active 只在点击瞬间生效，松开鼠标就失效了。真正实现“选中状态高亮”需要结合 HTML 结构和 CSS 类控制，下面介绍正确做法。
最常见且可靠的方式是给当前页面对应的菜单项添加一个类，比如 active，然后用 CSS 设置背景色高亮。
<nav>
<ul>
<li><a href="home.html" class="active">首页</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
</nav>
CSS 样式：
nav a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
nav a.active {
background-color: #007acc;
color: white;
}
当前页面的链接加上 class="active"，就能保持高亮显示。
立即学习“前端免费学习笔记（深入）”；
:active 是伪类，用于定义元素被点击时的样式，只在鼠标按下期间生效。适合做点击反馈，不适合表示“当前选中”。
示例：
nav a:active {
background-color: #ff6b6b;
}
这个效果一闪而过，不能保留，所以不能用来标识“哪个页面正在被访问”。
为了让菜单更友好，可以同时设置悬停和选中样式：
nav a:hover {
background-color: #f0f0f0;
}
nav a.active {
background-color: #007acc;
color: white;
}
用户悬停时有反馈，当前页始终高亮，体验更完整。
如果想自动高亮当前页面对应的菜单项，可以用 JavaScript 根据当前 URL 自动添加 active 类。
例如：
document.querySelectorAll('nav a').forEach(link => {
if (link.href === window.location.href) {
link.classList.add('active');
}
});
这样不用手动写 class，也能实现自动高亮。
基本上就这些。要用 background-color 实现高亮，核心是使用类名（如 active）配合 CSS 控制，而不是依赖 :active 伪类。结构清晰，维护方便，兼容性也好。
以上就是css导航菜单选中项高亮如何实现_使用:active和background-color控制的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
138
收藏
