Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

201
Visualizações
make list active on click

Hello I dont kknow anything about javascript help me make it active when i click on each item . enter image description here

$('.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>

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

The issue is that your a tags are not the children of your element having the card class, so the selector of .card > a is incorrect, as it only affects anchors being the children (and not descendants) of your element having the class of active. > means "child". Instead of that you can use space, which means descendant. Yet, it's better to target your li elements instead of a elements in order to make them active, because then you can use siblings out of the box in order to remove the active class. If you do not need to remove the active class from other elements, then you can simply remove the line which calls 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>

about 4 years ago · Juan Pablo Isaza Relatório

0

Looks like you are using jQuery? Just checking as that's what my answer will be using too.

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

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

This looks fine, but I don't see mainNav anywhere in your question.

> is the direct descendent selector, so it is trying to find all a elements directly under mainNav, what I think will work better is to change the selector to something like:

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

Complete example:

$('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');
});

This line might be throwing you off as well, it's hard to say without seeing the CSS, but I am guessing you might need to add active to the li, not the a tag itself?

If that is the case, change:

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

to

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

If it is the li element that should have the active class, then this line also needs changed:

// find/remove all active classes from each
$('ul.list-group li').removeClass('active');
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda