CODEWITHSUNDEEP
javascriptjqueryhtml
Paul
Paul

Reputation: 11746

add/remove active class for ul list with jquery?

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

Upvotes: 23

Views: 132962

Answers (6)

Neeraj Tangariya
Neeraj Tangariya

Reputation: 1407

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

Upvotes: 1

Ankit Jain
Ankit Jain

Reputation: 1

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

Upvotes: -1

J.D Ramirez
J.D Ramirez

Reputation: 21

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

Upvotes: 2

Naitik Shah
Naitik Shah

Reputation: 513

you can use siblings and removeClass method

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

Upvotes: 19

Ry-
Ry-

Reputation: 224904

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

Upvotes: 61

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

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.

Upvotes: 7

Related Questions