如何仅用CSS实现锚点标签点击后保持变色效果

你遇到的问题是 a:active 仅作用于链接被点击的瞬间，无法在页面跳转后保持高亮状态。要实现点击后持久保持样式的效果，我们可以利用页面专属的body类来匹配对应导航链接，这是纯CSS方案里最可靠的方式。

步骤1：为每个页面的body添加专属类 #

修改两个页面的<body>标签，分别添加唯一类名：

• home.html的body：

<body class="page-home">

• books.html的body：

<body class="page-books">

步骤2：编写CSS样式 #

在styles.css中，根据body的类名定位当前页面对应的导航链接，设置高亮样式：

/* 默认导航链接样式 */
ul li a {
  color: #333; /* 正常状态颜色，可自定义 */
  text-decoration: none;
}

/* 当前页面的导航链接高亮 */
.page-home ul li a[href="home.html"],
.page-books ul li a[href="books.html"] {
  color: #ff4500; /* 高亮颜色，可自定义 */
  font-weight: bold;
}

原理说明 #

当用户访问home.html时，页面的body带有page-home类，CSS会自动选中href="home.html"的链接并应用高亮样式；切换到books.html时，body的类变为page-books，对应的Books链接会高亮，Home链接恢复默认样式，全程无需JavaScript介入。

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