javascript - 单击一个时切换/关闭所有其他 div

Question

每个人。

需要帮助才能在单击一个 div 时关闭所有其他 div。提前致谢!

下面是代码:

=============================

JS

$(".dis-nav a").click(function(e){
e.preventDefault();
var myClass=$(this).attr("id");
//  alert(myClass);
$(".dis-content ."+myClass).toggle('fast');
});

=============================

HTML

<div class="dis-nav button">
<a href="#" id="area1">Firefox</a> 
<a href="#" id="area2">Safari</a> 
<a href="#" id="area3">Chrome</a> 
<a href="#" id="area4">IE</a> 
</div>

<div class="dis-content">
<div class="area1">
<h3>Firefox</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area2">
<h3>Safari</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area3">
<h3>Chrome</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
<div class="area4">
<h3>IE</h3>
<p>Suspendisse potenti. Morbi ac felis nec mauris imperdiet fermentum. Aenean sodales augue ac lacus hendrerit sed rhoncus erat hendrerit. Vivamus vel ultricies elit. Aliquam ut feugiat ante. Curabitur lacinia nulla vel tellus elementum non mollis justo aliquam.</p>
<a href="#" class="btn btn-warning"><i class="icon-shopping-cart"></i> Buy</a> <a href="#" class="btn btn-success">TryMais</a>
</div>
</div>

Answer 1

试试这个:

$(".dis-nav a").click(function (e) {
    e.preventDefault();
    var myClass = $(this).attr("id");
    //  alert(myClass);
    $('.dis-content div').hide();
    $(".dis-content ." + myClass).show();
});

Demo

如果你想一开始隐藏整个 block ，默认只显示第一个:

$(function(){
    $('.dis-content div').hide()
    $('.dis-content .area1').show()

    $(".dis-nav a").click(function (e) {
        e.preventDefault();
        var myClass = $(this).attr("id");
        //  alert(myClass);
        $('.dis-content div').hide();
        $(".dis-content ." + myClass).show();
    });
    $(".dis-nav #show-all").click(function (e) {
        $('.dis-content div').show()
    });
});

我会让你自己弄清楚 css 和其他次要细节。