单击更改活动菜单项的字体

Question

因此，我已经将此菜单链接到一些动态显示的内容，我一直在尝试编写一些js代码来更改当前活动项目的字体。 我的问题是，如果它不再处于活动状态，它永远不会取消选择该项目。

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;


});

});

任何帮助将是巨大的。 注意：由于余量引起的问题，我需要在最终解决方案中使用确切的showClickedContent查询。

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

您可以使用CSS做到这一点！ 我没有弄乱字体，但是我以font-size为例：

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

只需将font-size替换为font-family等。