如何实现导航点击后保持激活状态背景色（CSS）

你当前使用的:active伪类仅在点击瞬间生效，要实现点击后持续显示蓝色背景，需要通过**自定义类+JavaScript（或服务器端渲染）**来实现，具体方案如下：

1. 修改CSS样式 #

添加一个自定义的.active类，和:active伪类共用样式逻辑：

/* 保留原:active样式，同时新增.active类规则 */
.nav-home > a:active,
.nav-home > a.active {
    background: #4a90e2;
}
.nav-navigation > a:active,
.nav-navigation > a.active {
    color: #fff !important;
    background: #4a90e2;
}

2. 分场景实现状态保持 #

场景一：静态多页面（页面跳转后维持状态） #

如果导航链接是跳转到不同页面的，直接在对应页面的导航项中手动给<a>标签添加active类即可：

<!-- Home页面的导航项示例 -->
<li class="nav-home">
    <a href="#" class="active">
        <i class="fa fa-home"></i> <span>Home</span>
    </a>
</li>

也可以通过服务器端渲染（如PHP、Node.js等），根据当前页面URL自动匹配对应导航项并添加active类。

场景二：单页/无刷新页面（点击切换状态） #

如果是单页应用或无需跳转页面的场景，用JavaScript来切换active类：

// 获取所有导航链接元素
const navLinks = document.querySelectorAll('.sidebar-menu li a');

navLinks.forEach(link => {
    link.addEventListener('click', function() {
        // 移除所有导航链接的active类
        navLinks.forEach(item => item.classList.remove('active'));
        // 给当前点击的链接添加active类
        this.classList.add('active');
    });
});

若需要点击跳转页面后仍保持状态，可在页面加载时根据URL匹配设置active类：

window.addEventListener('load', () => {
    const currentUrl = window.location.pathname;
    const navLinks = document.querySelectorAll('.sidebar-menu li a');
    
    navLinks.forEach(link => {
        if (link.getAttribute('href') === currentUrl) {
            link.classList.add('active');
        }
    });
});

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