2

以下を使用してdivを表示および非表示にしています。うまくいきますが、もっと効率的だと思わずにはいられません。簡単な例では 3 つの国を示していますが、私のコードでは数十の国を処理する必要があります。私はjQueryが初めてです。「クリックしたときに任意の国を表示し、残りを非表示にする」と言う方法はありますか?

HTML

<div class="nav">
    <span id="France">France</span>
    <span id="Canada">Canada</span>
    <span id="Portugal">Portugal</span>
</div>

<!-- show div based on which span is clicked; hide the rest -->
<div class="content">
    <div class="France all">...</div>
    <div class="Canada all">...</div>
    <div class="Portugal all">...</div>
</div>

jQuery

$(document).ready(function(){

    $("#France").click(function(){
            $(".all").hide();
            $(".France").show();                
    }); 

    $("#Canada").click(function(){
            $(".all").hide();
            $(".Canada").show("");
            }); 

    $("#Portugal").click(function(){
            $(".all").hide();
            $(".Portugal").show("");        
    }); 

});
4

4 に答える 4

6

はい、これを行うことができます：

$('.nav span').click(function(){
    $('.all').hide();
    $('.'+this.id).show();
});

デモンストレーション

于 2012-12-17T16:37:41.983 に答える
1 
$('.nav span').on('click', function() {
    $('.content > div').eq($(this).index()).toggle().siblings().hide();
});​

フィドル

于 2012-12-17T16:43:43.113 に答える
1

何が表示されているかを追跡できます。 

$(document).ready(function(){

    var $current,
        $contents = $('.content .all').hide();

    $('.nav span').click(function() {
        if ($current) {
            $current.hide();
        }
        $current = $contents.filter('.' + this.id).show();
    });
}); ​
于 2012-12-17T16:43:49.630 に答える
1

クラスallを取り除いて使用できます.siblings().hide()

$('.nav span').click(function(){
    $('.'+this.id).show("").siblings().hide("");
});​
于 2012-12-17T16:42:38.437 に答える