Wie kann ich eine Klasse beim Klicken auf ein Element umschalten, aber die gleiche Klasse von allen anderen Elementen mit JQuery entfernen?

Question

Ich versuche mein Bestes, um dies richtig zu kommunizieren, also bitte mit mir ertragen. Ich versuche also, nur eine Klasse (aktiv) für ein Element zu aktivieren, auf das geklickt wird. Wenn auf ein anderes Element geklickt wird, möchte ich dem angeklickten Element die Klasse "active" hinzufügen und die aktive Klasse von jedem anderen Element entfernen.

Das Problem ist, wenn ich die „aktive“ Klasse auf ein Element klicken hinzugefügt wird, aber dann, wenn ich auf ein anderes Element klicken Sie auf die „aktive“ Klasse von den anderen Elementen nicht entfernt wird

  $("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

Hier ist der Arbeitscode:

$("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)

Beachten Sie, Sie Klassen "Test1" und "Test2" in dem HTML, aber Klasse "test" in der JS!

Answer 2

Verwenden Sie die Methode not, um Ihr aktuelles Element zu überspringen.

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

}); 

Answer 3

Sie müssen die Klasse vor dem Umschalten von anderen Elementen entfernen.

Versuchen Sie, diese

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

Das erste alle Anker mit Klasse entfernt aktive und dann schaltet die klickten Anker mit der Klasse.

Answer 4

Versuchen Sie dies.

$("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

unten genannten Link Gehen Sie durch erwähnt oder unten Code kann es Ihnen helfen kann.

JSFiddle

HTML-Code

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

.active{ 
    color:#00adef; 
} 

JavaScript-Code

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