So schließen Sie mehrere divs unabhängig voneinander. Javascript

Question

Ich baute eine Reihe von 4 Tasten, um 4 divs zu öffnen, eins nach dem anderen. Der Benutzer kann zwischen den 4 Divs wechseln, indem er diese Buttons anklickt. Aber der Benutzer muss in der Lage sein, diese divs wieder voneinander unabhängig zu schließen. Das heißt, wenn der Benutzer auf eine dieser Schaltflächen klickt, muss er sie nur mit einem "Schließen-Knopf" wieder schließen können. Diese Schaltfläche sollte in der Zeile von 4 enthalten sein. So wird es 4 Schaltflächen zu öffnen und zwischen den divs wie eine Galerie wechseln Und eine Schaltfläche, um zu schließen, welche div angezeigt wird.

Ich wäre sehr sehr glücklich wenn mir jemand helfen könnte, bitte !!!

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

Sie können eine Klasse auf das gezeigte Element hinzufügen

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

und auf Klick auf den Schließen-Button, können Sie es wieder verstecken kann.

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

Ich würde empfehlen, einen Blick auf jQuery zu haben, wie es das Leben mit JS viel einfacher macht. Darüber hinaus ist das Binden einer Methode an Fenster etwas übermächtig, da show ein sehr gebräuchliches Wort ist und von anderen Modulen überschrieben werden kann.

Answer 2

jquery verwenden, geben alle divs eine gemeinsame Klasse, wie divs

dann auf die Schaltfläche klicken, verwenden Sie folgende

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

Answer 3

die einfachste Sache tun .. eine gemeinsame Klasse allen Ihren div fügen Sie Schließen möchten und auf Schließen klicken Sie auf addClass ausblenden. Ich habe es in einem einfachen getan suchen jsfiddle https://jsfiddle.net/f96cxs3r/

Html wie

suchen wird

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

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

Und js wird

$(".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"); 
});