0

こんにちは、ユーザーが 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>
4

3 に答える 3

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');
    });
});
于 2013-03-08T06:49:10.637 に答える
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>
于 2013-03-08T06:48:33.860 に答える
0

.currentが現在表示されているタブを参照している場合、クリックされた項目が現在のものであるかどうかを確認して、クリックされたときにそれを無視する必要があります。 jQuery の hasClassは、アイテム クラスにcurrentが含まれている場合は true を返し、それ以外の場合は false を返します。

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

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

    });
}
于 2013-03-08T07:07:59.770 に答える