如何停止javascript淡出已經選擇的元素

Question

您好我有以下代碼，允許用戶在3個選項卡之間進行切換，它通過淡入淡出來顯示和隱藏div，我希望如果當前選項卡是在導航欄上選擇的，它不會淡入淡出，而是我希望它不做任何事情。

繼承人的代碼：

HTML：

<table border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td width="220px"> 
<p align="left"><table width="220px" cellspacing="0" cellpadding="0"> 

<tr> 
<td class="mya_nav" style="border-color: #B23387;"> 
<a id="show_personal">Personal</a> 
</td> 
</tr> 

<tr> 
<td class="mya_nav" style="border-color: #00c6ff;"> 
<a id="show_favourites">Favourites</a> 
</td> 
</tr> 

<tr> 
<td class="mya_nav" style="border-color: #00e60b;"> 
<a id="show_history">History</a> 
</td> 
</tr> 

</table> 
</p> 

</td> 
<td width="675px"> 

<div id="content"> 


    <div id="personal" <?php echo $personal_current; ?>> 
     <p align="center">Personal</p> 

    </div> 
    <div id="favourites" <?php echo $favourite_current; ?>> 
     <p align="center">Favourites</p> 

    </div> 
    <div id="history" <?php echo $recent_current; ?>> 
     <p align="center">History</p> 

    </div> 
</div> 
</td> 
</tr> 
</table> 

JS：

<script> 

    $('p a').click(function(){ 

     var id = $(this).html().toLowerCase(); 

     $('.current').fadeOut(600, function(){ 

      $('#'+id).fadeIn(600); 
      $('.current').removeClass('current'); 
      $('#'+id).addClass('current'); 

     }); 

    }); 

</script> 

Answer 1

您可以嘗試

<script> 

    $('p a').click(function(){ 

     var id = $(this).html().toLowerCase(); 
     if($('.current').attr('id')!=id){ 
      $('.current').fadeOut(600, function(){ 
       $('#'+id).fadeIn(600); 
       $('.current').removeClass('current'); 
       $('#'+id).addClass('current'); 

      }); 
     } 

    }); 

</script> 

Answer 2

$('p a').click(function(){ 
    var id = $(this).html().toLowerCase(); 
    if (this.not(':focus')) { 
     $('.current').fadeOut(600, function(){ 
      $('#'+id).fadeIn(600); 
      $('.current').removeClass('current'); 
      $('#'+id).addClass('current'); 
    }); 
}); 

Answer 3

if .current引用當前顯示的標籤，當點擊它時，通過檢查被點擊的項目是否是當前標籤，您應該忽略它。 jQuery's hasClass將返回true，如果該項目類別包含當前否則返回false。

if(!$('#'+id).hasClass('current')){ 
    $('.current').fadeOut(600, function(){ 

     $('#'+id).fadeIn(600); 
     $('.current').removeClass('current'); 
     $('#'+id).addClass('current'); 

    }); 
}