如何关闭彼此独立的多个div。 javascript [英] How to close multiple divs independed from each other. javascript
本文介绍了如何关闭彼此独立的多个div。 javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我建立了一行4个按钮来一次打开4个div。用户可以通过单击这些按钮在4个div之间切换。但是，用户必须能够彼此独立地再次关闭该div。这意味着，如果用户单击这些按钮之一，则他必须只能使用一个关闭按钮再次将其关闭。该按钮应包含在第4行中。
因此，将有4个按钮可以打开并在div之间切换，例如画廊
，并且有一个按钮可以关闭显示的div。
I built a row of 4 buttons to open 4 divs, one at a time. The user can switch between the 4 divs by clicking these buttons. But, the user must be able to close this divs again, independed from each other. That means if the user clicks one of these buttons he must be able to close it again with one "closing-button" only. This button should be included to the row of 4. So there will be 4 buttons to open and switch between the divs like a gallery And one button to close whichever div is shown.
如果有人可以帮助我，我将非常高兴！！！
I would be very very happy if someone could help me, please!!!
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> = div id = id2 class = hidden< b" Ommolooccuptatur。/b> Enter ut ut erpernatio omperum erfernatio occuptatur rest perereptae nempore odioriberro qui dellatq uiaspelit opta cum acest，etur？ Num enihil moloritatur，抗性和抗风湿性。重新获得有效的解决方案。 Ecepe landi tet哈里发性ilquun tibus。 Ebit ut ulluta ad et ut que expereictis arion eicabor epernatur？
Nam dolupti re eos umquiaecus，ullorib eritatq uaernatur，nonsequi impelest fugitamet quias vella sit ducidus dolupta estior molore，quas rem adisquam，quia volecae natiis arcitium etursimupéumum eum um um。 Sedicimaios et fuga。阿卡波。 Empore num aut istio。最小投资者，西提奥。输入率永久性占位永久性永久性线虫性孢子球孢子菌Num enihil moloritatur，抗性和抗风湿性。重新获得有效的解决方案。 Ecepe landi tet哈里发性ilquun tibus。 Ebit ut ulluta ad et ut que expereictis arion eicabor epernatur？
< div id = id4 class = hidden" b" Optiaep erfero< / b> br" Id fufu officto dolupta spill il ipsant arum et oditaquia se cullore nistiistin nonsequae qui corem quibust，quisciisti culluptatur sedi Testrum sectur？ Nam dolupti re eos umquiaecus，ullorib eritatq uaernatur，nonsequi最不满意的fugitamet quias vella sit ducidus dolupta estior molore，quas rem adisquam，quia volecae natiis arcitium etur simum inum eost毛孔voluptat quaum。 Sedicimaios et fuga。阿卡波。 Empore num aut istio。最小投资者，西提奥。输入率永久性占位永久性永久性线虫性孢子球孢子菌Num enihil moloritatur，抗性和抗风湿性。重新获得有效的解决方案。 Ecepe landi tet哈里发性ilquun tibus。 Ebit ut ulluta ad et ut que expereictis arion eicabor epernatur？
推荐答案
做最简单的事情..向要关闭的所有div添加一个通用类，并在关闭按钮上单击addClass隐藏它。我已经在一个看起来很简单的jsfiddle中完成了 https://jsfiddle.net/f96cxs3r/
Do the simplest thing.. add a common class to all your div you want to close and on close button click addClass hide to it. I have done it in a simple looking 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
