我该如何改进我的jQuery显示/隐藏实现？

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(); 
    }); 
}); ​