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

Just a thought, but could it be because you're adding the active class to the actual list, and not the list object within the list? You remove from .nav-list li, but add to .nav-list — Chikilah
– Chikilah, Commented Nov 24, 2013 at 18:53
if you log $(this) you'll see that your event refers to the list itself. you have to refer to the listelement $('.nav-list li') or better use event delegation as desrcibed by @minitech below — ho.s
– ho.s, Commented Nov 24, 2013 at 18:59

Ry- · Accepted Answer · 2013-11-24 18:53:33Z

61

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

answered Nov 24, 2013 at 18:53

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naitik Shah · Accepted Answer · 2014-05-28 13:31:20Z

19

you can use siblings and removeClass method

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

answered May 28, 2014 at 13:31

Naitik Shah

5136 silver badges13 bronze badges

1 Comment

This Guy Over a year ago

I know this is coming up on almost a year old, but this solution worked for me!

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-24 18:53:11Z

7

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.

answered Nov 24, 2013 at 18:53

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Comments

Mogsdad · Accepted Answer · 2016-05-10 02:36:32Z

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>.

edited May 10, 2016 at 2:36

Mogsdad

46k21 gold badges167 silver badges289 bronze badges

answered May 9, 2016 at 19:15

J.D Ramirez

211 bronze badge

Comments

Neeraj Tangariya · Accepted Answer · 2021-07-28 10:44:48Z

1

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

answered Jul 28, 2021 at 10:44

Neeraj Tangariya

1,4171 gold badge24 silver badges30 bronze badges

Comments

Rastalamm · Accepted Answer · 2019-08-08 14:47:57Z

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

Collectives™ on Stack Overflow

add/remove active class for ul list with jquery?

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related