如何根据页内锚点链接的访问状态加载对应配色图标

问题核心梳理 #

• 需求：为页内命名锚点（href="#xxx"形式）匹配状态图标，未访问显示黄色图标、已访问显示绿色图标，两个图标仅颜色存在差异
• 已知限制：浏览器出于隐私安全策略，禁止JS直接读取链接:visited状态，同时限制:visited伪类下的部分CSS能力
• 已验证无效的方案：
  • 直接为a:visited设置独立的background-image资源地址，样式未生效
  • 通过JS读取链接计算样式的颜色值判断访问状态，Chrome下始终返回空字符串/未访问状态值，无法得到真实结果
• 目标逻辑等价于：

if (link previously visited)
  set image to green-icon
else
  set image to yellow-icon

可行方案 #

因为你的场景是纯页内锚点，不需要处理跨页、外部链接的访问状态，完全不需要用绕浏览器隐私限制的黑科技，有两个稳定、兼容所有现代浏览器的方案可选：

方案1：纯CSS实现（优先推荐，零JS代码） #

浏览器对:visited的CSS限制本质是：禁止站点通过:visited加载差异化资源、通过样式差异泄露用户历史访问记录。但浏览器明确允许在:visited状态下修改同一个资源的渲染颜色，不会触发安全拦截。
你之前直接换background-image地址不生效，就是因为两个状态用了不同的图片资源，被浏览器安全策略直接拦截了。
正确实现步骤：

1. 只准备1份基础图标资源（推荐用单色SVG、图标字体，单色PNG也可），不需要做黄、绿两个版本的文件
2. 默认未访问状态下，给锚点加载该基础图标，通过CSS调整为黄色
3. :visited状态下不更换图片地址，仅通过CSS调整同一张图标的渲染效果为绿色即可
   参考代码：

/* 锚点基础样式：未访问状态 */
a.jump-anchor {
  padding-left: 20px;
  background: url("./icon-base.svg") left center / 16px 16px no-repeat;
  /* 滤镜把基础图标调成黄色 */
  filter: sepia(1) saturate(3) hue-rotate(5deg);
}
/* 已访问状态：仅改滤镜参数把同一张图调成绿色，不换图片地址 */
a.jump-anchor:visited {
  filter: sepia(1) saturate(3) hue-rotate(90deg) brightness(0.8);
}

如果用内联SVG、图标字体实现更简单：直接给a标签默认设置color: #ffcc00（黄色），a:visited设置color: #2ecc71（绿色），给图标设置currentColor为填充色即可，连滤镜都不需要，这是浏览器明确允许的:visited可修改属性，完全不会被拦截。

方案2：JS自主记录访问状态（100%可控，适合复杂交互场景） #

页内锚点的点击行为100%发生在当前页面上下文里，你完全不需要依赖浏览器的历史记录判断访问状态，自行记录用户点击行为即可，完全绕开所有:visited相关的安全限制。
实现逻辑：

1. 页面加载时，从本地存储读取用户之前点击过的锚点列表
2. 遍历所有页内锚点，已在记录中的锚点加绿色图标样式，否则加黄色图标样式
3. 给所有锚点绑定点击事件，用户点击后把对应锚点记入本地存储，同步切换为绿色图标样式
   参考代码：

document.addEventListener('DOMContentLoaded', () => {
  // 读取本地存储的已访问锚点
  const visitedSet = new Set(JSON.parse(localStorage.getItem('localVisitedAnchors') || '[]'));
  const allAnchors = document.querySelectorAll('a[href^="#"]');

  allAnchors.forEach(anchor => {
    const targetHash = anchor.getAttribute('href');
    // 初始化样式
    anchor.classList.add(visitedSet.has(targetHash) ? 'green-icon' : 'yellow-icon');
    
    // 点击后标记为已访问
    anchor.addEventListener('click', () => {
      if (visitedSet.has(targetHash)) return;
      visitedSet.add(targetHash);
      localStorage.setItem('localVisitedAnchors', JSON.stringify([...visitedSet]));
      anchor.classList.replace('yellow-icon', 'green-icon');
    })
  })
})

这个方案没有任何样式限制，你不仅可以换图标颜色，加动画、改布局、加提示文案都可以，唯一的影响是用户清除浏览器站点数据后，访问记录会重置，对于页内导航场景几乎没有影响。 #

避坑说明 #

不要尝试通过JS读取元素计算样式判断:visited状态，浏览器已经对所有读取:visited样式的API做了伪装，无论链接是否被访问过，JS拿到的样式值永远和未访问状态一致，这条路是完全封死的，没有绕过空间。

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