javascript - 如何关闭彼此独立的多个div。 javascript

Question

我构建了一排 4 个按钮来打开 4 个 div，一次一个。用户可以通过单击这些按钮在 4 个 div 之间切换。但是，用户必须能够再次关闭这个 div，彼此独立。这意味着如果用户单击这些按钮之一，他必须能够仅使用一个“关闭按钮”再次关闭它。此按钮应包含在第 4 行中。所以会有4个按钮可以像画廊一样打开和切换div以及一个按钮来关闭显示的任何 div。

如果有人能帮助我，我将非常高兴!!!

window.show = function(elementId) { 
    var elements = document.getElementsByTagName("div");
    for (var i = 0; i < elements.length; i++)
        elements[i].className = "hidden";
    
    document.getElementById(elementId).className = "";
}

.hidden {
    display: none;
}
.designbutton {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	color: #266786;
	background:none;
	background-image: none;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	border-color:#266786;
	border-bottom:hidden;
	border-right:hidden;
}
#id1 {
	position:absolute;
	top:100px;
	left:30px;
	background-color:#33CC99;
	padding-left:90px;
	padding-right:90px;
	padding-top:30px;
	height:660px;
	width: 724px;
	color: #266786;
	line-height:1.65;
	text-align:center;
}
#id2 {
	height:auto;
	width:600px;
	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: ##444444;
	position:absolute;
	left:30px;
	line-height:1.65;
	margin-top:50px;
}
#id3 {
	height:auto;
	width:600px;
	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: ##444444;
	position:absolute;
	left:30px;
	line-height:1.65;
	margin-top:50px;
}
#id4 {
	height:auto;
	width:600px;
	text-align:center;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: ##444444;
	position:absolute;
	left:30px;
	line-height:1.65;
	margin-top:50px;
}

<button class="designbutton" type="button" onclick="show('id1');">Economic Center</button>
<button class="designbutton" type="button" onclick="show('id2');">Logistic Center</button>
<button class="designbutton" type="button" onclick="show('id3');">Industrial Center</button>
<button class="designbutton" type="button" onclick="show('id4');">Financial Center</button>



<div id="id1" class="hidden">
<p><b>El idem sae.</b></p>
<p>Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
Odipsunto venist occus issitae storepro iumqui volorat ionsedis nonem audi vellit faceaquiae. Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.</p></div>

<div id="id2" class="hidden">
<b>Ommolo occuptatur.</b><br><br>
Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.</div>

<div id="id3" class="hidden">
<b>Idunt perempor.</b><br><br>
Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.
</div>

<div id="id4" class="hidden">
<b>Optiaep erfero</b><br><br>
Id et fugit officto dolupta spicide il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust, quisciisti culluptatur sedi testrum sectur?
Odipsunto venist occus issitae storepro iumqui volorat ionsedis nonem audi vellit faceaquiae. Nam dolupti re eos iumquiaecus, ullorib eritatq uaernatur, nonsequi impelest 
fugitamet quias vella sit ducidus dolupta estior molore, quas rem adisquam, quia volecae natiis arcitium etur sim inum eost pore voluptat quamusae nonsequi rerum sedit, quae. 
Sedicimaios et fuga. Accabo. Empore num aut istio. Minum que inveliaest, ut accus recatiisvendam, sitio. Ent ut ut ratemperum erfernatio ommolo occuptatur rest perereptae 
nempore odioriberro qui dellatq uiaspelit opta cum acest, etur? Num enihil moloritatur, tem corenias rehendit rero est aut et verum re nossum voluptaquae dis eaquae. Re ea 
consequ idisquasim vendebi tiisquatur solupta ssequaspero idunt perempor sam qui ulligent. Ecepe landi tet harchic iliquun tibus. Ebit ut ulluta ad et ut que expereictis 
arion eicabor epernatur? Optiaep erfero con re vendam rerume nullaccum rerspic to blaboria que vendandant.
</div>

Answer 1

使用jquery，给所有的divs一个公共(public)类，比如divs

然后点击按钮，使用下面的

$(".divs").hide();