<button class="fbutton btn pull-right filterevents " id="one" >School Events</button>
  <button class="fbutton btn pull-right filterevents" id="two" >Zone Events</button>
  <button class="fbutton btn pull-right filterevents" id="three" >My Events</button>

I need to add class "selected" to specific button onClick.

my code is

$("#one").click(function(e) {
                $(this).addClass("fcurrent");
                $("#two").removeClass("fcurrent");
                 $("#three").removeClass("fcurrent");
   });

if i use instead of id to class like following ,

$(".fbutton").click(function(e) {
                    $(this).addClass("fcurrent");
       });

then how to remove the fcurrent class to another two buttons

 <button class="fbutton btn pull-right filterevents " id="one" >School Events</button>
  <button class="fbutton btn pull-right filterevents" id="two" >Zone Events</button>
  <button class="fbutton btn pull-right filterevents" id="three" >My Events</button>

I need to add class "selected" to specific button onClick.

my code is

$("#one").click(function(e) {
                $(this).addClass("fcurrent");
                $("#two").removeClass("fcurrent");
                 $("#three").removeClass("fcurrent");
   });

if i use instead of id to class like following ,

$(".fbutton").click(function(e) {
                    $(this).addClass("fcurrent");
       });

then how to remove the fcurrent class to another two buttons

• javascript
• jquery

6 Answers 6

Try this.

$(".fbutton").click(function (e) {
$(this).addClass("fcurrent").siblings().removeClass("fcurrent");
});

DEMO

$(".fbutton").click(function(e) {
    $(".fbutton").removeClass("fcurrent");
    $(this).addClass("fcurrent");
});

You can first remove .fcurrent class from all button elements , then add your class to current button like this:

$(".fbutton").click(function(e) {
    $(".fbutton").removeClass("fcurrent");
    $(this).addClass("fcurrent");
}

If you only use the fcurrent class for these buttons, you could remove the class from any other button that has it before adding it to the current button:

$('.fbutton').click(function(e) {
    $('.fcurrent').removeClass('fcurrent');
    $(this).addClass('fcurrent');
});

You can first remove the class fcurrent from all buttons and then add it again to the one you clicked.

$(".fbutton").click(function(e) {
   $(".fbutton").removeClass("fcurrent");
   $(this).addClass("fcurrent");
});

You can try this -

$(".fbutton").click(function(e) {
    $(".fbutton").removeClass("fcurrent");
    $(this).addClass("fcurrent");
});