CSS实现鼠标悬停下划线并保持点击后下划线状态的方法

要让导航链接点击后保持下划线，仅靠CSS伪类是不够的——:active伪类只在鼠标按住元素时生效，松开后就会恢复。你需要添加一个自定义激活类，配合简单的JS实现状态持久化，具体操作如下：

1. 更新CSS样式 #

在原有代码基础上，新增.active类的样式，让拥有该类的导航链接保持下划线：

.navbar-nav .nav-link::after {
    content: '';
    border-bottom: 3px solid #0F9CD8;
    display: block; 
    transition: width .3s;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    -ms-transition: width .3s;
    -o-transition: width .3s;   
    width: 0;
}

/* 保留原悬停效果 */
.navbar-nav .nav-link:hover::after {
    width: 100%;
}

/* 新增激活状态样式 */
.navbar-nav .nav-link.active::after {
    width: 100%;
}

2. 添加JS处理点击事件 #

用原生JS给每个导航链接绑定点击事件，点击时给当前元素添加.active类，同时移除其他兄弟导航项的激活类，确保只有当前选中项保持下划线：

// 获取所有导航链接
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');

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

额外提示 #

• 如果是Vue/React等框架开发，可借助框架的状态管理控制active类的添加，逻辑和原生JS一致，只是写法不同。
• 页面初始加载时，可给默认选中的导航项手动加上.active类（比如首页链接）。

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