El problema es que sus etiquetas a no son los elementos secundarios de su elemento que tiene la clase de card , por lo que el selector de .card > a es incorrecto, ya que solo afecta a los anclajes que son los elementos secundarios (y no descendientes) de su elemento que tiene la class de active > significa "niño". En lugar de eso, puede usar espacio, lo que significa descendiente. Sin embargo, es mejor apuntar a sus elementos li en lugar de elementos a para activarlos, porque entonces puede usar siblings para usar para eliminar la class active . Si no necesita eliminar la class active de otros elementos, simplemente puede eliminar la línea que llama a siblings() .

 $('.card li').click(function(e){ // find/remove all active classes from each a $('.mainNav > a').removeClass('active'); // add active selected a $(this).addClass('active').siblings().removeClass("active"); e.preventDefault(); });

 .active { background-color: lightgreen; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-4"> <div class="card text-dark mb-3"style="auto" > <div class="card-header" style="background: #ffc221" > MENU </div> <ul class="list-group list-group-flush"> <li class="list-group-item active"><a href=""> Math mcq</a></li> <li class="list-group-item"><a href=""> Urdu mcq</a></li> <li class="list-group-item"><a href=""> Stat mcq</a></li> </ul> </div> </div>

¿Parece que estás usando jQuery? Solo comprobando que eso es lo que usará mi respuesta también.

 $('.card > a').click(function(e){ // find/remove all active classes from each a $('.mainNav > a').removeClass('active'); // add active selected a $(this).addClass('active'); });

Esto se ve bien, pero no veo mainNav en ninguna parte de su pregunta.

> es el selector descendiente directo, por lo que está tratando de encontrar todos los a directamente debajo de mainNav , lo que creo que funcionará mejor es cambiar el selector a algo como:

 $('ul.list-group li > a').removeClass('active');

Ejemplo completo:

 $('ul.list-group li > a').click(function(e){ e.preventDefault(); // added this line to prevent default click behaviour // find/remove all active classes from each a $('ul.list-group li > a').removeClass('active'); // add active selected a $(this).addClass('active'); });

Esta línea también podría estar desconcertándote, es difícil decirlo sin ver el CSS, pero supongo que es posible que debas agregar active a li , no a la etiqueta a en sí.

Si ese es el caso, cambie:

 // add active selected a $(this).addClass('active');

a

 // add active selected li $(this).parent().addClass('active');

Si es el elemento li el que debería tener la clase activa, entonces esta línea también debe cambiarse:

 // find/remove all active classes from each $('ul.list-group li').removeClass('active');