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

您可以在显示的元素

中添加一个类

...
document.getElementById(elementId).className = "shown";
...

单击关闭按钮，您可以再次隐藏它。

window.hide = function() { 
    var elements = document.getElementsByClassName("shown");
    elements[0].className = "hidden";
}

window.show = function(elementId) { 
    var elements = document.getElementsByClassName("shown");
    if (elements.length > 0)
        elements[0].className = "hidden";
    
    document.getElementById(elementId).className = "shown";
}

window.hide = function() { 
    var elements = document.getElementsByClassName("shown");
    if (elements.length > 0)
        elements[0].className = "hidden";
}

.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;
}

<div>Some other div</div>

<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>
<button class="designbutton" type="button" onclick="hide();">Close</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?</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?</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.
</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?
</div>

我强烈建议您查看jQuery，因为它可以让JS更轻松。此外，将方法绑定到窗口有点过于强大，因为show是一个非常常见的单词，可能会被其他模块覆盖。

Answer 2

使用jquery，为所有divs提供一个公共类，例如divs

然后点击按钮，使用以下

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

Answer 3

做最简单的事情..为你要关闭的所有div添加一个公共类，然后在关闭按钮上单击addClass隐藏它。我是用简单的jsfiddle https://jsfiddle.net/f96cxs3r/

完成的

Html看起来像

<div class="firstDiv">
 <div class="onebox gallery hide"></div>
 <div class="openBoxone"><button>Open</button></div>
</div>
<div class="secondDiv">
 <div class="twobox gallery hide"></div>
 <div class="openBoxtwo"><button>Open</button></div>
</div>
<div class="thirdDiv">
  <div class="threebox gallery hide"></div>
  <div class="openBoxthree"><button>Open</button></div>
</div>

<div class="closeButton">
   <div><button>Close</button></div>
</div>

Css看起来像

.hide{display:none;}
.onebox{width:100px;height:100px;border:1px solid red;}
.twobox{width:100px;height:100px;border:1px solid green;}
.threebox{width:100px;height:100px;border:1px solid blue;}
.firstDiv,.secondDiv,.thirdDiv{display:inline-block;width:250px;} 
.closeButton{text-align:center;padding:20px;}

js将是

$(".openBoxone button").on("click",function(){
   $(".onebox").removeClass("hide");
});
$(".openBoxtwo button").on("click",function(){
   $(".twobox").removeClass("hide");
});
$(".openBoxthree button").on("click",function(){
  $(".threebox").removeClass("hide");
});

$(".closeButton button").on("click",function(){
  $(".gallery").addClass("hide");
});

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

3 个答案: