如何让CSS导航菜单元素的点击效果持续到点击另一元素为止

:active伪类生效规则 #

:active伪类仅在元素被按下未松开的短暂时间段内生效，鼠标松开后样式立即失效，无法实现持久的选中状态效果。

实现持久选中效果的两种方案 #

方案1：纯CSS实现（依赖:target伪类） #

适合简单静态页面，不需要引入JS：

HTML代码

<nav>
  <a href="#ex1" id="ex1"> ex1 </a>
  <a href="#ex2" id="ex2"> ex2 </a>  
  <a href="#ex3" id="ex3"> ex3 </a>
</nav>

CSS代码

/* 匹配当前哈希对应的导航元素 */
nav a:target {
  background-color: darkblue;
  color: #fff;
}
/* 可选：默认第一个元素处于选中状态 */
nav a:first-child {
  background-color: darkblue;
  color: #fff;
}
nav a:target ~ a {
  background-color: transparent;
  color: inherit;
}

注意：该方案会修改页面URL的哈希值，和哈希路由冲突的项目不推荐使用

方案2：JS实现（通用方案，适用性更广） #

通过类名切换控制选中状态，适配所有场景：

HTML代码

<nav>
  <a href="#" class="nav-item"> ex1 </a>
  <a href="#" class="nav-item"> ex2 </a>  
  <a href="#" class="nav-item"> ex3 </a>
</nav>

CSS代码

/* 自定义选中态样式 */
.nav-item.active {
  background-color: darkblue;
  color: #fff;
}

JS代码

const navItems = document.querySelectorAll('.nav-item')
// 给所有导航项绑定点击事件
navItems.forEach(item => {
  item.addEventListener('click', function(e) {
    // 若不需要跳转链接可开启阻止默认行为
    // e.preventDefault()
    // 清空所有导航项的选中状态
    navItems.forEach(el => el.classList.remove('active'))
    // 给当前点击项添加选中状态
    this.classList.add('active')
  })
})
// 可选：默认第一个导航项选中
navItems[0]?.classList.add('active')

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