javascript - 使用 Javascript 更改点击时的列表项颜色

Question

由于我是 Java 脚本新手，我需要知道如何使用 Java 脚本更改列表项颜色或样式？

例如，我的 HTML 文件中有以下无序列表:

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>

现在，当我单击项目时，它应该更改颜色，当单击下一个项目时，它将保留前一个项目的新颜色，并更改新单击项目的颜色(下面的示例屏幕截图):

Answer 1

尝试以下解决方案。这也会切换点击。

var ul = document.getElementById("list");

var listItems = ul.getElementsByTagName("li");

for(li of  listItems){
  li.addEventListener('click', function(){
    if(this.classList.contains('active')){
      this.classList.remove("active");
    } else {
      this.classList.add("active");
    }
  })
}

.active{
  color: red;
}

<ul id="list">
   <li>Text1</li>
   <li>Text2</li>
   <li>Text3</li>
   <li>Text4</li>
</ul>