Question

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

问题是当我点击一个元素时添加了“active”类但是当我点击另一个元素时，“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");

            });

HTML

<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>

(Working pen)

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

Answer 2

使用not方法跳过当前元素。

$("li.test a").click(function() {
    var $this = $(this);
    $('.test a').not($this).removeClass('active');
    $this.toggleClass("active");

});

Answer 3

在切换之前，您必须从其他元素中删除该类。

试试这个

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

首先删除活动类的所有锚点，然后用该类切换单击的锚点。

Answer 4

试试这个。

$("li").click(function(){
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
})

li.active a{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
<li class="test1 active">
 <a href="#" class="">test</a>
</li>

<li class="test1">
 <a href="#" class="">test</a>
</li>

<li class="test1">
 <a href="#" class="">test</a>
</li>

<li class="test2">
 <a href="#" class="">test</a>
</li>

<li class="test2">
 <a href="#" class="">test</a>
</li>

<li class="test2">
 <a href="#" class="">test</a>
</li>
</ul>

Answer 5

通过下面提到的链接或下面提到的代码可能对它有帮助。

JSFiddle

HTML代码

<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>

CSS代码

.active{
  color:#00adef;
}

JAVASCRIPT代码

$("a").click(function(){
    $('a').removeClass('active');
  $(this).addClass("active");
});

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

5 个答案: