單擊一個時切換/關閉所有其他div

Question

大家。

需要幫助以關閉單擊其他所有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();
});

演示

如果要初始隱藏整個塊，並且默認情況下僅顯示第一個塊：

$(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和其他次要細節。