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

您可以带走课程all并使用.siblings().hide()

$('.nav span').click(function(){
    $('.'+this.id).show("").siblings().hide("");
});​
于 2012-12-17T16:42:38.437 回答
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 回答