單擊更改活動菜單項的字體

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等。