jQuery - switch between buttons

Question

I have two <li> elements in my menu. What I am trying to achieve is to switch between classes when they are clicked. If I click the first one it should get the .activeBtn class and the other to .nonactiveBtn class.

The code I have so far doesn't work properly and I cannot find a way.

fiddle here:

$('#catBtn').on('click', function()  {
        $("#container0").fadeToggle("slow");
        $("#container1").fadeOut("slow");
        $( '#signinBtn' ).toggleClass( "noActiveBtn" );
        $( this ).toggleClass( "activeBtn" );
        event.preventDefault();
    });

    $('#signinBtn').on('click', function()  {
        $("#container1").fadeToggle("slow");
        $("#container0").fadeOut("slow");
        $( '#catBtn' ).toggleClass( "noActiveBtn" );
        $( this ).toggleClass( "activeBtn" );
        event.preventDefault();
    });

Answer 1

Solved I did not know about removeClass .

 $(".menuBtns").click(function() {
      // remove classes from all
      $(".menuBtns").removeClass("activeBtn");
      // add class to the one we clicked
      $(this).addClass("activeBtn");    });