我想在每次单击按钮时显示一个 div,并且还想隐藏其他所有 div,我该如何做到这一点。
HTML
<div id=a style="display:none">1</diV>
<div id=b style="display:none">2</diV>
<div id=c style="display:none">3</diV>
<div id=d style="display:none" >4</diV>
<input type=button value=1 id=w>
<input type=button value=2 id=x>
<input type=button value=3 id=y>
<input type=button value=4 id=z>
jQuery
$('#w').live('click', function () {
$('#a').css('display', 'block');
});
$('#x').live('click', function () {
$('#b').css('display', 'block');
});
$('#y').live('click', function () {
$('#c').css('display', 'block');
});
$('#z').live('click', function () {
$('#d').css('display', 'block');
});
最佳答案
在 JSFiddle 中,您使用的是 jQuery 1.7.2。如果您在实际应用中使用此版本,则不应使用 $.live()
,而应使用 $.on()
相反 - 前者已被弃用,取而代之的是后者。
解决问题的最简单、最干净的方法是将按钮和 div 包装在容器中,并使用 $.index()
将按钮与 div 关联起来:
<div class="showThese">
<div id="a" style="display:none">1</div>
<div id="b" style="display:none">2</div>
<div id="c" style="display:none">3</div>
<div id="d" style="display:none" >4</div>
</div>
<div class="buttons">
<input type="button" value="1" id="w">
<input type="button" value="2" id="x">
<input type="button" value="3" id="y">
<input type="button" value="4" id="z">
</div>
请注意,您的属性必须加引号,如上面的 HTML 所示。
然后,在 JavaScript 中,您只需将一个委托(delegate)事件绑定(bind)到按钮容器即可。在这种情况下,我将使用 $.on()
:
$('div.buttons').on('click', 'input', function() {
var divs = $('div.showThese').children();
divs.eq($(this).index()).show().siblings().hide();
});
Here是一个演示。
上述方法不必使用 ID 和其他属性,但是如果您想要容器中的其他元素,则需要小心,因为 $.index()
将开始失败如果你这样做的话。
关于javascript - 如何显示一个div并隐藏所有其他div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10946927/