1

リンクをクリックしたときに div を表示および非表示にしようとしています。div が正しく表示されるようになりましたが、別の div をクリックするとその div が消えてしまいます。これは私が現在持っているコードです。

<script type="text/javascript"> 
            $(function() {
                $('#attach_silver').click(function() {
                    $('#sec_silver').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_gold').click(function() {
                    $('#sec_gold').show();
                    return false;
                });        
            });

            $(function() {
                $('#attach_platinum').click(function() {
                    $('#sec_platinum').show();
                    return false;
                });        
            });
        </script>

<a href="#" id="attach_silver">Silver</a>
    <a href="#" id="attach_gold">Gold</a>
    <a href="#" id="attach_platinum">Platinum</a>

<div id="sec_silver" style="display: none;">
        Hello world!! Silver              
    </div>

    <div id="sec_gold" style="display: none;">
        Hello world!! Gold             
    </div>

    <div id="sec_platinum" style="display: none;">
        Hello world!! Platinum            
    </div>
4

7 に答える 7

1

セレクターで ^ attribute-starts を使用する

$('div[id^="sec_"]').hide(); // will hide all the div with id starting with sec_

あなたのコードは

$(function () {
    $('#attach_silver').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_silver').show();
        return false;
    });
    $('#attach_gold').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_gold').show();
        return false;
    });
    $('#attach_platinum').click(function () {
        $('div[id^="sec_"]').hide();// add here
        $('#sec_platinum').show();
        return false;
    });
});
于 2013-10-24T16:12:11.527 に答える
0

id/class パターンが気に入っています。また、クラスを追加することで、そのインライン スタイルを削除できます。追加：

.divclass{
    display: none
}
于 2013-10-24T17:13:48.663 に答える
0

他の div のみを表示し、非表示にするように指示することはありません。

<script type="text/javascript"> 
$(function () {
    $('#attach_silver').click(function () {
        console.log('sliver click');
        $('#sec_silver').show();
        $('#sec_gold').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_gold').click(function () {
        $('#sec_gold').show();
        $('#sec_silver').hide();
        $('#sec_platinum').hide();
        return false;
    });
});

$(function () {
    $('#attach_platinum').click(function () {
        $('#sec_platinum').show();
        $('#sec_gold').hide();
        $('#sec_silver').hide();
        return false;
    });
});
</script>
于 2013-10-24T16:14:11.907 に答える
0

JavaScriptでそれを行うには：

<a href="#xyz" onclick="hideDiv();">Hide Div</a> 

function hideDiv()
{
 document.getElementById('myContainerDiv').style.display = "none";
}
于 2015-07-28T10:09:20.797 に答える
0

2行のソリューションはどうですか

$('a').click(function () {
    $('div:contains('+$(this).text()+')').show();
    $('div:not(:contains('+$(this).text()+'))').hide();
});

ライブデモ

于 2013-10-24T16:36:30.060 に答える