javascript - 单击按钮隐藏许多 div

Question

我有 6 个 div，我想单击按钮隐藏 5 个并显示 1 个，单击其他按钮隐藏另外 5 个并显示 1 个。 我不想一一隐藏它们。有什么方法可以同时隐藏所有ID: 我的html代码:

<div id="ad1" style="display: none;">Div content 1</div>
<div id="ad2" style="display: none;">Div content 2</div>
<div id="ad3" style="display: none;">Div content 3</div>
<div id="ad4" style="display: none;">Div content 4</div>
<div id="ad5" style="display: none;">Div content 5</div>
<br/>
<button id='button1'>click1</button>
<button id='button2'>click2</button>
<button id='button3'>click3</button>
<button id='button4'>click4</button>
<button id='button5'>click5</button>

我尝试过这样的事情:

$("#button1").click(function () {
    $("#ad1").show();
    $("#ad2 #ad3 #ad4 #ad5").hide();
});

$("#button2").click(function () {
    $("#ad2").show();
    $("#ad1 #ad3 #ad4 #ad5").hide();
});

我的jsfiddle:DEMO

任何帮助:)

Answer 1

只需用 , 分隔元素即可选择多个元素:

$("#button1").click(function () {
    $("#ad1").show();
    $("#ad2, #ad3, #ad4, #ad5").hide();
});

$("#button2").click(function () {
    $("#ad2").show();
    $("#ad1, #ad3, #ad4, #ad5").hide();
});

这是您的更新FIDDLE