add/remove active class for ul list with jquery?

Question

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?

HTML

<ul class="nav nav-list">
  <li class='nav-header'>Test</li>
  <li class="active"><a href="page1.php">Page 1</a></li>
  <li><a href="page2.php">Page 2</a></li>
  <li><a href="page3.php">Page 3</li>
</ul>

jquery:

 $('.nav-list').click(function() {

    //console.log("Clicked");
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

Answer 1

this will point to the <ul> selected by .nav-list . You can use delegation instead!

$('.nav-list').on('click', 'li', function() {
    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

Answer 2

you can use siblings and removeClass method

$('.nav-link li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

Answer 3

Try this,

 $('.nav-list li').click(function() {

    $('.nav-list li.active').removeClass('active');
    $(this).addClass('active');
});

In your context $(this) will points to the UL element not the Li . Hence you are not getting the expected results.

Answer 4

I used this:

$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');

Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li> .

Answer 5

In my case I have div element with same class. Now I added the active class on it using jquery check the code.

div element

<div class="previewBox" id="first_div">
 ...
</div>

<div class="previewBox" id="second_div">
 ...
</div>

<div class="previewBox" id="third_div">
 ...
</div>

jquery code

$(".previewBox").click(function () {
   $(".previewBox.active").removeClass('active')
   $(this).addClass('active')
});

css

.active {
  background-color:#e9f1f5;
  border-left:4px solid #024a81;
}

Demo click_this

Answer 6

 $(document).ready(function(){ $('.cliked').click(function() { $(".cliked").removeClass("liactive"); $(this).addClass("liactive"); }); });

 .liactive { background: orange; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul className="sidebar-nav position-fixed " style="height:450px;overflow:scroll" > <li> <a className="cliked liactive" href="#"> check Kyc Status </a> </li> <li> <a className="cliked" href="#"> My Investments </a> </li> <li> <a className="cliked" href="#"> My SIP </a> </li> <li> <a className="cliked" href="#"> My Tax Savers Fund </a> </li> <li> <a className="cliked" href="#"> Transaction History </a> </li> <li> <a className="cliked" href="#"> Invest Now </a> </li> <li> <a className="cliked" href="#"> My Profile </a> </li> <li> <a className="cliked" href="#"> FAQ`s </a> </li> <li> <a className="cliked" href="#"> Suggestion Portfolio </a> </li> <li> <a className="cliked" href="#"> Bluk Lumpsum / Bulk SIP </a> </li> </ul>;