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 w

Answer 1

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 2

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 3

$(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>;

Answer 4

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 5

you can use siblings and removeClass method

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