Question

我有6divs，我希望按钮点击隐藏五个并显示一个，在其他按钮点击隐藏另外五个并显示一个。我不想一个接一个地隐藏它们。是否可以在同一时间通过ID隐藏所有内容：我的HTML代码：

sudo apt-get install apache2
Reading package lists... Done
Building dependency tree       
Reading state information... Done
Some packages could not be installed. This may mean that you have
requested an impossible situation or if you are using the unstable
distribution that some required packages have not yet been created
or been moved out of Incoming.
The following information may help to resolve the situation:

The following packages have unmet dependencies:
apache2 : Depends: apache2-bin (= 2.4.7-1ubuntu4.6) but it is not going to be installed
E: Unable to correct problems, you have held broken packages.

我试过这样的事情：

<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>

我的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

Answer 2

$("#button1").click(function () {
    visible =  $(".ads:visible");
    next = visible.next(".ads");
    debugger;
    if(next.length > 0 ){
    	next.show();
    }else{
    $(".ads").first().show();
    }
    visible.hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ads" id="ad1">Div content 1</div>
<div class="ads" id="ad2" style="display: none;">Div content 2</div>
<div class="ads" id="ad3" style="display: none;">Div content 3</div>
<div class="ads" id="ad4" style="display: none;">Div content 4</div>
<div class="ads" id="ad5" style="display: none;">Div content 5</div>
<br/>
<button id='button1'>click1</button>

单击按钮可隐藏多个div

2 个答案: