change active menu-items font on click

Question

So, i've got this menu which is linked to some dynamically displayed content, I've been trying to write some js-code that changes the font of the currently active item. My problem is now that it never deselects that item if it isn't active anymore.

jsfiddle:

https://jsfiddle.net/z4uhL5wv/2/

jquery:

$(document).ready(function() {

  $("a.menu2").click(function(e) {
  $('.ShowClickedContent').html($($(this).attr('href')).html()); //dynamic content
  var clicks = 0;

      if(clicks % 2 == 0){
          $(this).css('font-family','gillsans');
      }else{
          $(this).css('font-family','gillsanslight');
      }
      ++clicks;


});

});

Any help would be greatful. Note: i need to use that exact showClickedContent query in the final solution due to problems arising with margin otherwise.

Answer 1

https://jsfiddle.net/ynrnt6xL/

$(document).ready(function() {

  const buttons = $('.menu2');
  const clear = function() {
    $.each( buttons, function(index, btn) {
        $(btn).removeClass('selected');
    })
  }

    $.each( buttons, function(index, btn) {
    $(btn).click( function(e) {
        clear();
      $(this).addClass('selected');
    });
  });

});

Answer 2

You can do it with CSS! I didn't mess with fonts, but I did it with font-size as an example:

a:active, a:focus {font-size:15px;}

Just replace the font-size with font-family and whatever...