如何使用JavaScript实现点击文本行时修改其颜色的功能

你代码失效的核心原因是*标签的默认跳转行为*：点击后会立刻加载href指向的/index.html页面，颜色修改的逻辑执行后页面立刻刷新/跳转，你看不到效果。如果你的页面背景也是白色，就算不跳转也会看不出颜色变化，测试时可以先换成其他醒目颜色比如红色验证。

方案1：适配现有写法的最小修改 #

仅需要修改两处即可生效：

1. 给onclick事件传递事件对象，阻止跳转默认行为
2. 测试阶段可先把颜色换成更醒目的红色验证效果

JS代码：

function changeColor(e) {
  // 阻止a标签默认跳转行为
  e.preventDefault();
  const target = document.getElementById("weekly");
  // 可替换为你需要的白色，测试时先用red更容易看到效果
  target.style.color = "red";
}

HTML代码：

<ul>
  <li><a id="weekly" href="/index.html" onclick="changeColor(event)">Weekly</a></li>
</ul>

方案2：适合多列表项的通用写法 #

如果你的列表项很多，不需要给每个元素单独绑定事件、定义ID，用事件委托实现更易维护，后续新增列表项无需修改JS逻辑：

JS代码：

// 给整个ul绑定点击事件
document.querySelector('ul').addEventListener('click', function(e) {
  // 判断点击的是不是a标签
  if (e.target.tagName === 'A') {
    e.preventDefault();
    // 直接修改当前点击的a标签颜色
    e.target.style.color = 'red';
  }
})

HTML代码：

<ul>
  <li><a href="/index.html">Weekly</a></li>
  <li><a href="/other.html">其他列表项</a></li>
  <!-- 后续加多少项都不用改JS -->
</ul>

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