0

每个人。

单击一个时需要帮助关闭所有其他 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>
4

1 回答 1

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和其他小细节。

于 2013-10-27T22:06:13.040 回答