Hola, no sé nada sobre javascript, ayúdame a activarlo cuando hago clic en cada elemento.
$('.card > a').click(function(e){ // find/remove all active classes from each a $('.mainNav > a').removeClass('active'); // add active selected a $(this).addClass('active'); });
<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>
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');