js中点击锚点持久化变色

在JavaScript中，当你想要实现点击链接（锚点）时使其颜色发生改变并保持这种状态直到用户再次交互，通常可以借助CSS和JavaScript结合使用。以下是一个简单的示例：

// 获取所有需要变色的锚点元素
var anchorElements = document.querySelectorAll('a[data-persist-color]');

// 遍历每个锚点元素
anchorElements.forEach(function(anchor) {
  // 当鼠标悬停在锚点上时，更改其颜色
  anchor.addEventListener('mouseover', function() {
    this.style.color = 'your-desired-color'; // 比如：red 或 '#ff0000'
  });

  // 当鼠标离开时，恢复原始颜色
  anchor.addEventListener('mouseout', function() {
    if (this.getAttribute('data-persist-color') !== null) { // 如果有数据属性表明要保留颜色
      this.style.color = this.getAttribute('data-persist-color'); // 使用数据绑定的颜色
    } else {
      this.style.color = ''; // 或者恢复默认样式
    }
  });
  
  // 如果有"data-persist-color"数据属性，表示颜色应被持久化
  if (anchor.getAttribute('data-persist-color')) {
    anchor.style.color = anchor.getAttribute('data-persist-color');
  }
});

在这个例子中，你需要将`'your-desired-color'`替换为你希望锚点高亮时显示的实际颜色。同时，记得在HTML中给那些你希望改变颜色的锚点添加`data-persist-color`的数据属性，并将其值设为相应的颜色。