Javascript 每次调用onClick函数时更改背景

我想在每次调用onClick时更改背景并删除上一个选项卡背景，但当我尝试这样做时，上一个onClick效果保持不变

这是代码

<script type="text/javascript">
  function myFunction() {
    document.getElementById("a").style.backgroundColor = "lightblue";
  }
</script>


<a href="#home" class="tabs">
  <li id="a" onclick="myFunction" class="tabs-li">Home</li>
</a>
<a href="#about-us" class="tabs">
  <li id="a" onclick="myFunction" class="tabs-li">About Us</li>
</a>
<a href="#contact-us" class="tabs">
  <li id="a" onclick="myFunction" class="tabs-li">Contact Us</li>
</a>

函数myFunction（）{
document.getElementById（“a”）.style.backgroundColor=“浅蓝色”；
}

第零定律：不应复制

id

首先，学习HTML。看到非语义标记对每个HTML人来说都很烦人

您应该正确地嵌套标记。打你教过的人。此外，最为错误和不幸的W3Schools，（我从不推荐它），它被所有人憎恨，也不会犯这种错误

错误：

<a><li></li></a>

<li><a></a></li>

第四，你在概括。

我最近看到很多开发人员在这样做。相反，为什么不在CSS中使用一个简单的

：hover

，而不使用JavaScript呢。让我们看看没有JavaScript的：

li:hover{背景色：浅蓝色；}

替换为

onclick=“myFunction（）”

完成该更改，无论单击哪个onclick，它都会使用id=“a”更改元素的背景。完成该更改，无论单击哪个onclick，它都会使用id=“a”更改元素的背景。其次，我想对整个li应用锚定tag@S我很抱歉，请查看第零定律。解决方案请！如果没有，请停止评论。同时分享一些关于“使用

有什么错？”

onclick="myFunction()"