div's hiden en showen
Dit is de HTML code:
<nav id="menu">
<ul>
<li><a href="#" onclick="xShow('Appels');">Appels</a></li>
<li><a href="#" onclick="xShow('Peren');">Peren</a></li>
<li><a href="#" onclick="xShow('Bananen');">Bananen</a></li>
</ul>
</nav>
<section id="content">
<div id="Appels"><p>Hier komt appels</p></div>
<div id="Peren"><p>Hier komt peren</p></div>
<div id="Bananen"><p>Hier komt bananen</p></div>
</section>
------------
<script language="JavaScript">
function xShow(divID) {
Appels.style.display="none";
Bananen.style.display="none";
Peren.style.display="none";
var item = document.getElementById(divID);
if (item== 'Appels') {
Appels.style.display='block';
}
if (item == 'Peren') {
Peren.style.display='block';
}
if (item == Bananen) {
Bananen.style.display='block';
}
}
</script>
en dit is de CSS (belangrijkste deel):
#Bananen, #Peren {
display: none;
}
#Appels {
display: block;
}
------------
Appels moet showen als de pagina wordt geladen. Als je op de menuknoppen drukt moet de bijbehorende div showen. Dit werkt echter niet :/
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = "none";
}
else {
el.style.display = "";
}
}
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = "none";
}
else {
el.style.display = "";
}
}
en aanroepen moet dan via:
Code (php)
als je wil dat een div dan niet wordt laten zien, geef je deze de stijl "display: none" zoals in het voorbeeld
Gewijzigd op 24/09/2010 19:15:46 door Vincent Huisman
moet zijn
document.getElementById('Appels').style.display="none";