javascript - 如何显示一个div并隐藏所有其他div

Question

我想在每次单击按钮时显示一个 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');
});

​ http://jsfiddle.net/6UcDR/

Answer 1

在 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() 将开始失败如果你这样做的话。