Question

我正在使用以下内容来显示和隐藏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("");        
    }); 

});

Answer 1

是的，你可以这样做：

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

Demonstration

Answer 2

您可以取消课程all并使用.siblings().hide()

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

Answer 3

$('.nav span').on('click', function() {
    $('.content > div').eq($(this).index()).toggle().siblings().hide();
});

FIDDLE

Answer 4

你可以跟踪显示的内容：

$(document).ready(function(){

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

    $('.nav span').click(function() {
        if ($current) {
            $current.hide();
        }
        $current = $contents.filter('.' + this.id).show();
    });
});

如何改进我的jQuery show / hide实现？

4 个答案: