How to stop javascript fading out element already selected

Question

Hi There i have the following code that allows users to swap between 3 tabs, it shows and hides divs by fading them in and out, I would like it so that if the current tab is selected on the nav bar it doesnt fade out and in again, instead i want it to do nothing.

Heres the code:

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

You can try

<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 refers to the tab which is currently shown, you should just ignore it when its clicked, by checking if the item clicked is the current one. jQuery's hasClass will return true if the item class contains current otherwise it returns false.

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

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

    });
}