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

Question

我想在每次调用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>

Answer 1

Zeroth Law ：id不应重复。

首先，学习HTML。每个HTML人都看到非语义标签很烦人。

您应该正确嵌套标签。击中你教过的人。此外，每个人都讨厌的最失误和命运多ill的 W3Schools （ 从不推荐 ）也不会犯这个错误

  

<强>错误：

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

     

从右：

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

其次，onclick。

您最后需要添加()。

onclick="myFunction()"

第四，您正在推广。

我最近看到很多开发人员这样做。相反，为什么不在CSS中使用简单的:hover，而不使用JavaScript。让我们看看没有JavaScript的 ：

li:hover {background-color: lightblue;}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

按照您的方式，使用JavaScript，使用onclick()：

$(function () {
  $("li").click(function () {
    $(this).css("background-color", "lightblue");
  });
  $("li a").click(function () {
    $(this).closest("li").css("background-color", "lightblue");
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

最后，您需要：

$(function () {
  $("li").click(function () {
    $("li").removeAttr("style");
    $(this).css("background-color", "lightblue");
  });
  $("li a").click(function () {
    $("li").removeAttr("style");
    $(this).closest("li").css("background-color", "lightblue");
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>