CSS如何快速实现导航栏交互_利用Sass嵌套书写点击响应-css教程-PHP中文网

必须用JavaScript添加is-active类并配合Sass样式实现导航高亮，:active和:target均不可靠；需兼顾键盘操作与无障碍，统一处理:focus与.is-active状态。

css如何快速实现导航栏交互_利用sass嵌套书写点击响应

导航栏点击后如何保持高亮状态

靠 CSS 本身无法感知“点击”，:active 只在鼠标按下瞬间生效，松开就消失。真要维持点击后的高亮，必须靠 JavaScript 控制 class，再用 Sass 去写对应的样式嵌套规则。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

给当前激活的导航项加一个 is-active 类（别用 active，太容易和 Bootstrap 冲突）

Sass 里用嵌套写：

.nav-item {
  &.is-active {
    background: #007bff;
    color: white;
  }
}

注意：如果用 router-link（Vue）或 NavLink（React Router），它们自带 activeClassName 或 className 函数，别重复手写逻辑

Sass 嵌套里怎么避免过度选择器层级

导航栏结构常是

或带 role="link" + tabindex="0" 的元素

:focus 样式不能被 outline: none 粗暴清除；可用 outline: 2px solid #007bff 配合 outline-offset: 2px 优化视觉

Sass 中可统一处理：

.nav {
  &__link {
    color: #333;
    @at-root .nav-link.is-active {
      color: #007bff;
      font-weight: 600;
    }
  }
}

为什么不用 `:target` 搞导航高亮

有人试过用 URL 锚点 + :target 实现无 JS 高亮，比如 #home 对应

。这方法在导航栏上基本不可行。

:target 匹配的是页面内 id，不是导航项自身，你得把每个  的 href 指向一个真实存在的 id，而多数导航跳转是路由或页面刷新
单页应用中，URL 改变不会触发 :target 重算（History API 不影响锚点状态）
即使强行用，样式优先级也容易被嵌套规则压垮，调试时你会看到 .nav-link:target 完全不生效——因为根本没匹配到



实际项目里最易被忽略的，是点击态和焦点态的样式共存逻辑。比如用户用键盘 tab 到某个导航项，再按回车，这时既要 :focus，又要 .is-active，两个 class 得同时存在且不互相覆盖。Sass 里别写成互斥的 &:focus { ... } 和 &.is-active { ... }，而要合并处理。
.nav-link {
  &:focus,
  &.is-active {
    outline: 2px solid #007bff;
  }
}