Add active class to nav links with exception for some li

Question

I have ul.menu for which few li are styled differently, therefore those li dont need to add active class.

<ul class="menu">
   <li id="1st" class="default"><a href="#">Text1</a></li>
   <li id="2nd" class="default"><a href="#">Text2</a></li>
   <li class="cross-out"><a href="#">Text3</a></li>
</ul>

jQuery to add active class for first two links, except li.cross-out

$('ul.menu li').click(function(){
    $('ul.menu li').removeClass('active');
    $(this).not('cross-out').addClass('active');
});

What is wrong? Hope I was clear enough...

An [MCVE](http://stackoverflow.com/help/mcve) would have shown this to you... — Scimonster, Oct 23 '14 at 18:08
oh my F@ASD@ sorry for disturbing. nothing meaningful here to see... — 01e5Dk, Oct 23 '14 at 18:11
Would it be better to use something like `$(this).siblings('li.active').removeClass('active')` instead of `$('ul.menu li').removeClass('active')`? — PeterKA, Oct 23 '14 at 18:22
PeterKA, you are right, didnt know of that move. Thanks for correcting me! — 01e5Dk, Oct 23 '14 at 18:27

score 3 · Answer 1 · answered Oct 23 '14 at 18:06

3

You forgot the class identifier before cross-out:

$('ul.menu li').click(function(){
    $('ul.menu li').removeClass('active');
    $(this).not('.cross-out').addClass('active');
});

answered Oct 23 '14 at 18:06

dsgriffin

66,495
17
137
137

Thanks, dsg! But for the community this post should be deleted, since the question is not helpful to others... My mistake, sorry! – 01e5Dk Oct 23 '14 at 18:09

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

Jquery has a toggle class function

$("#td_id").toggleClass('default active');

related post jquery change class name

edited May 23 '17 at 11:44

Community

1
1

answered Oct 23 '14 at 18:11

JWarren

113
5

PeterKA · Accepted Answer · 2014-10-23T18:19:49.570

The period makes all the difference. Then because you may have several other ul.menu elements on your page, you just want the one whose li was clicked to change:

$('ul.menu li').click(function(){
    $(this).siblings('li.active').removeClass('active');
    $(this).not('.cross-out').addClass('active');
});

$('ul.menu li').click(function(){
        $(this).siblings('li.active').removeClass('active');
        $(this).not('.cross-out').addClass('active');
    });

.active {
  background-color:gray;
  font-weight:bolder;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
   <li class="default"><a href="#">Text1</a></li>
   <li class="default"><a href="#">Text2</a></li>
   <li class="cross-out"><a href="#">Text3</a></li>
</ul>

<ul class="menu">
   <li class="default"><a href="#">Text1</a></li>
   <li class="default"><a href="#">Text2</a></li>
   <li class="cross-out"><a href="#">Text3</a></li>
</ul>

<ul class="menu">
   <li class="default"><a href="#">Text1</a></li>
   <li class="default"><a href="#">Text2</a></li>
   <li class="cross-out"><a href="#">Text3</a></li>
</ul>

Add active class to nav links with exception for some li

3 Answers3