每个人。
需要帮助才能在单击一个 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>
最佳答案
试试这个:
$(".dis-nav a").click(function (e) {
e.preventDefault();
var myClass = $(this).attr("id");
// alert(myClass);
$('.dis-content div').hide();
$(".dis-content ." + myClass).show();
});
如果你想一开始隐藏整个 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 和其他次要细节。
关于javascript - 单击一个时切换/关闭所有其他 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19624141/