如何在单击元素时切换类，但使用 JQuery 从所有其他元素中删除相同的类？

Question

我正在尽力正确地表达这一点，所以请耐心等待。因此，我尝试仅在单击的元素上切换类（活动）。如果单击另一个元素，我想将类“active”添加到单击的元素，并从任何其他元素中删除活动类。

问题是，当我单击一个元素时，会添加“活动”类，但是当我单击另一个元素时，“活动”类不会从其他元素中删除

           $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

            $("li.test a").click(function() {
                $(this).toggleClass("active");
            });


            $("li.test a").click(function() {
                $(this).toggleClass("active");

            });

超文本标记语言

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test1">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

<li class="test2">
 <a href="#" class="">
</li>

Answer 1

这是工作代码：

$("li.test a").on("click",function() {
  if($(this).hasClass("active")){
    $(this).removeClass("active");
  } else{
    $("a.active").removeClass("active");
    $(this).addClass("active");
  }
});

.active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

<li class="test">
 <a href="#" class="">test</a>
</li>

（工作笔）

请注意，HTML 中有类“test1”和“test2”，但 JS 中有类“test”！