div's hiden en showen

Door Roflcopter Lol op 24-09-2010 19:01

1.293 views

Ik heb een website waar 3 mogelijke content venster onder moeten komen te staan. Deze wil ik met javascript (via een menu) showen. Ik ben nog niet heel goed en weet dus ook niet precies waar het probleem zit.

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 :/

Vincent Huisman

24-09-2010 19:14 gewijzigd op 24-09-2010 19:15

deze werkt in iedergeval wel:


function switchMenu(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != "none" ) {
        el.style.display = "none";
    }
    else {
        el.style.display = "";
    }
}

en aanroepen moet dan via:
<?php
echo '<a href="javascript:void(0);" onclick="switchMenu(\'reviews\');" title="Reviews bekijken">Reviews bekijken</a><br />';
echo '<div id="reviews" style="display: none">';
?>

als je wil dat een div dan niet wordt laten zien, geef je deze de stijl "display: none" zoals in het voorbeeld

Pim -

24-09-2010 19:22

Appels.style.display="none";

moet zijn

document.getElementById('Appels').style.display="none";

Reageren

Inloggen om te reageren