Entfernen von Klassenattribut von li auf Klick

Question

Ich habe den folgenden Code in HTML. Ich möchte nur aktive Klasse entfernen, wenn wir auf andere li klicken und aktive Klasse zu li hinzufügen, auf die geklickt wird.

<ul class="pagination" id="paginationUL"> 
    <li class="active"><a href="#">1</a></li> 
    <li onclick="javascript:selectThis()"><a href="#">2</a></li> 

Ich habe versucht, die Klasse zuerst und es funktioniert nicht zu entfernen. Bitte vorschlagen.

function selectThis() { 
    $('ul[class="pagination"] li[class="active"]').removeClass("active")); 
} 

das Skript Herausgegeben und es funktioniert.

Answer 1

Sie können eine Zeile schreiben, um alle li Elemente in diesem Menü zu binden. Der Selektor $(this) wirkt gegen das angeklickte Element, während .siblings() auf alle anderen untergeordneten li Elemente wirkt.

$('#paginationUL > li').click(function(){ 
 
    $(this).addClass('active').siblings().removeClass('active') 
 
})

.active { background: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="pagination" id="paginationUL"> 
 
    <li class="active"><a href="#">1</a></li> 
 
    <li><a href="#">2</a></li> 
 
    <li><a href="#">3</a></li> 
 
</ul>

Answer 2

Ihre Auswahl ist nicht korrekt. Verwenden Sie #paginationUL[class="pagination"] li[class="active"] oder ul.pagination li.active oder #paginationUL li.active

Answer 3

Ihre Selektoren sind falsch. Sie müssen die ID (#) oder Klasse (.) Selektor verwenden:

$('#paginationUL li.active').removeClass("active"); 

aber du bist besser dran nicht aufdringlich Ereignishandler verwenden und eher entlang der Linien der folgenden, etwas zu tun:

$('#paginationUL > li').on('click', function() { 
    $(this).addClass('active').siblings('.active').removeClass('active'); 
}); 

Das letzte Beispiel wendet eine Klasse von active auf das angeklickte Element an und entfernt es von anderen Elementen in <ul>.

Answer 4

Sie können so etwas wie dieses

$("#paginationUL li").click(function() { 
    $(this).toggleClass("active"); 
    $(this).siblings().removeClass("active"); 
}); 

Answer 5

verwenden Wenn Sie jQuery verwenden sollte es tun:

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