 PHP beginner |
|
Hallo,
ik heb volgend probleem:
ik heb 1 div (= b_div) die de volledige grootte van het scherm inneemt en die 'doorzichtig' is (opacity: 95%).
Daarnaast heb ik 4 div's, die ieder in het centrum staan van de eerste div (b_div).
Wat is het probleem?
De vier andere divs kunnen geopend worden via het menu.
Ze kunnen terug gesloten worden door op de b_div te klikken.
probleem is nu: wanneer een div geopend is, en deze moet gesloten worden, moet er via een javascript functie telkens alle divs gesloten worden (dus display: none ipv block), aangezien de javascript niet weet welke div er open is.
Het probleem is nu dat de pagina dynamisch wordt (= een variabel aantal divs die geopend kunnen worden).
De code:
<script type="text/javascript">
function openDiv(id) {
document.getElementById('b_div').style.display = 'block';
document.getElementById('div_' + id).style.display = 'block';
}
function closeDiv() {
document.getElementById('b_div').style.display = 'none';
document.getElementById('div_1').style.display = 'none';
document.getElementById('div_2').style.display = 'none';
document.getElementById('div_3').style.display = 'none';
document.getElementById('div_4').style.display = 'none';
}
</script>
<div id="b_div" class="border_filter" style="display: none;" onclick="closeDiv();"><!-- De div die opacity=95% heeft --></div>
<div id="div_1" class="popup_content" style="display: none;">Dit is inhoud 1</div>
<div id="div_2" class="popup_content" style="display: none;">Dit is inhoud 2</div>
<div id="div_3" class="popup_content" style="display: none;">Dit is inhoud 3</div>
<div id="div_4" class="popup_content" style="display: none;">Dit is inhoud 4</div>
<a href="#" onclick="openDiv('1');">Div 1 openen</a> | <a href="#" onclick="openDiv('2');">Div 2 openen</a> | <a href="#" onclick="openDiv('3');">Div 3 openen</a> | <a href="#" onclick="openDiv('4');">Div 4 openen</a>
<script type="text/javascript"> function openDiv(id) { document.getElementById('b_div').style.display = 'block'; document.getElementById('div_' + id).style.display = 'block'; } function closeDiv() { document.getElementById('b_div').style.display = 'none'; document.getElementById('div_1').style.display = 'none'; document.getElementById('div_2').style.display = 'none'; document.getElementById('div_3').style.display = 'none'; document.getElementById('div_4').style.display = 'none'; } </script> <div id="b_div" class="border_filter" style="display: none;" onclick="closeDiv();"><!-- De div die opacity=95% heeft --></div> <div id="div_1" class="popup_content" style="display: none;">Dit is inhoud 1</div> <div id="div_2" class="popup_content" style="display: none;">Dit is inhoud 2</div> <div id="div_3" class="popup_content" style="display: none;">Dit is inhoud 3</div> <div id="div_4" class="popup_content" style="display: none;">Dit is inhoud 4</div> <a href="#" onclick="openDiv('1');">Div 1 openen</a> | <a href="#" onclick="openDiv('2');">Div 2 openen</a> | <a href="#" onclick="openDiv('3');">Div 3 openen</a> | <a href="#" onclick="openDiv('4');">Div 4 openen</a>
Edit: ik heb het zelf opgelost. Ik sla de div op die open staat in een variabele.
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
Gesponsorde links
Actiefste leden van de maand
