如何停止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'); 

    }); 
}