make list active on click-CodePudding

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

$('.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 >
      <div style="auto"  >
        <div  style="background: #ffc221"  >  MENU </div>
        <ul >
          <li ><a href="">  Math mcq</a></li>
          <li ><a href="">  Urdu mcq</a></li>
          <li ><a href="">  Stat mcq</a></li>
         
          
        </ul>
      </div>
    </div>

CodePudding user response：

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 >
      <div style="auto"  >
        <div  style="background: #ffc221"  >  MENU </div>
        <ul >
          <li ><a href="">  Math mcq</a></li>
          <li ><a href="">  Urdu mcq</a></li>
          <li ><a href="">  Stat mcq</a></li>
         
          
        </ul>
      </div>
    </div>

CodePudding user response：

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');

// 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');