Add and remove a class on click using jQuery?

Question

Please see this fiddle.

I am trying to add and remove a class on li elements that are clicked. It is a menu and when one clicks on each li item I want it to gain the class and all other li items have the class removed. So only one li item has the class at a time. This is how far I have got (see fiddle). I am not sure how to make the 'about-link' start with the class current, but then it is remove when one of the other li items are clicked on?

$('#about-link').addClass('current');
$('#menu li').on('click', function() {
    $(this).addClass('current').siblings().removeClass('current');
});

Jamie Taylor · Accepted Answer · 2017-03-17 11:49:36Z

102

Why not try something like this?

$('#menu li a').on('click', function(){
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

JSFiddle

edited Mar 17, 2017 at 11:49

answered Oct 22, 2013 at 14:26

Jamie Taylor

4,7736 gold badges47 silver badges68 bronze badges

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

1 Comment

JunKim Over a year ago

Brilliant.Could it get any better?

Satpal · Accepted Answer · 2020-05-29 06:46:42Z

8

you can try this along, it may help to give a shorter code on large function.

$('#menu li a').on('click', function(){
    $('li a.current').toggleClass('current');
});

edited May 29, 2020 at 6:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Oct 22, 2013 at 14:37

Stanley Amos

3322 silver badges9 bronze badges

Comments

Sjerdo · Accepted Answer · 2013-10-22 14:27:19Z

5

The other li elements are not siblings of the a element.

$('#menu li a').on('click', function(){
    $(this).addClass('current').parent().siblings().children().removeClass('current');
});

answered Oct 22, 2013 at 14:27

Sjerdo

1871 silver badge4 bronze badges

Comments

user1864610 · Accepted Answer · 2013-10-22 14:27:27Z

3

You're applying your class to the <a> elements, which aren't siblings because they're each enclosed in an <li> element. You need to move up the tree to the parent <li> and find the ` elements in the siblings at that level.

$('#menu li a').on('click', function(){
$(this).addClass('current').parent().siblings().find('a').removeClass('current');
});

See this updated fiddle

answered Oct 22, 2013 at 14:27

user1864610

Comments

palaѕн · Accepted Answer · 2013-10-22 14:30:12Z

3

You can do this:-

$('#about-link').addClass('current');
$('#menu li a').on('click', function(e){
    e.preventDefault();
    $('#menu li a.current').removeClass('current');
    $(this).addClass('current');
});

Demo: Fiddle

answered Oct 22, 2013 at 14:30

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

stealthyninja · Accepted Answer · 2014-05-22 10:02:56Z

2

Try this in your Head section of the site:

$(function() {
    $('.menu_box_list li').click(function() {
        $('.menu_box_list li.active').removeClass('active');
        $(this).addClass('active');
    });
});

edited May 22, 2014 at 10:02

stealthyninja

10.4k11 gold badges56 silver badges61 bronze badges

answered May 22, 2014 at 9:34

user3664350

311 bronze badge

Comments

Jean-François Fabre · Accepted Answer · 2021-05-31 20:41:21Z

2

You can try this,

$(function () {
   $("#btnSubmit").click(function () {
   $("#btnClass").removeClass("btnDiv").addClass("btn");
   });
});

you can also use switchClass() method - it allows you to animate the transition of adding and removing classes at the same time.

$(function () {
        $("#btnSubmit").click(function () {
            $("#btnClass").switchClass("btn", "btnReset", 1000, "easeInOutQuad");
        });
    });

edited May 31, 2021 at 20:41

Jean-François Fabre♦

141k24 gold badges179 silver badges246 bronze badges

answered May 4, 2015 at 13:31

Barath Kumar

4393 silver badges7 bronze badges

Comments

Rajesh Doot · Accepted Answer · 2018-05-04 06:05:08Z

1

var selector = '.classname';
$(selector).on('click', function(){
    $(selector).removeClass('classname');
    $(this).addClass('classname');
});

answered May 4, 2018 at 6:05

Rajesh Doot

611 silver badge2 bronze badges

Collectives™ on Stack Overflow

Add and remove a class on click using jQuery?

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related