Hey all,
I have a problem. I need to hand in a school assignment tomorrow and my html script ain’t working. I’m freaking out so I need every resource I could get help from. xD So here it is:
I have a list of 3 options which are links. Once a link is pressed, it should show one of the pages below.
I think it’s a newby problem so please help. 
Html
<!DOCTYPE html>
<html lang=“nl”>
<head>
<meta charset=“utf-8”>
<link rel=“stylesheet” type=“text/css” href=“praktische opdracht.css” />
<title> Rekenmachine </title>
<script language=“JavaScript”>
function laatZien(divID) {
var item = document.getElementById(divID);
Binair.className=“verstopt”;
Euro.className=“verstopt”;
Credits.className=“verstopt”;
if (item) {
item.className=(item.className==“verstopt”)?“zichtbaar”:
“verstopt”;
}
}
</script>
</head>
<body>
<header id=“header1”>
<h1>Dit is de titel</h1>
</header>
<nav id=“menu”>
<ul>
<li><a href=“javascript:laatZien(‘Binair’);”>Binair - Decimaal</a></li>
<li><a href=“javascript:laatZien(‘Euro’);”>Euro - Dollar</a></li>
<li><a href=“javascript:laatZien(‘Credits’);”>De maker</a></li>
</ul>
</nav>
<section id=“inhoud”>
<div id=“Binair” class=“verstopt”>
Hier komt het stuk over binair rekenen.
</div>
<div id=“Euro” class=“verstopt”>
Hier komt het stuk over euro rekenen.
</div>
<div id=“Credits” class=“verstopt”>
Hier komt het stuk over de maker.
</div>
</section>
</body>
</html>
Css
nav {
position: absolute;
/zet de positie van het nav-blok op een vaste plek/
left: 0;
/het blok begint links aan de linkerkant van de body/
width: 100%;
/het navigatieblok neemt de gehele breedte in van de
browser/
background: #808080;
}
nav ul {
/hiermee geeft je aan dat het om de unordered list van het
nav blok gaat/
margin-top: 0;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
width: 100%;
/de eigenschappen van de ul-blok/
list-style: none;
/hiermee verdwijnen bij de unordered list de bolletjes/
}
nav ul li {
/hiermee geeft je aan dat het om de list elementen van de
unordered list van het nav blok gaat/
float: left;
/de lijst gaat hierdoor van links naar rechts i.p.v. van
boven naar beneden/
}
nav ul li a {
/hiermee geeft je aan dat het om de a-elementen van de
list-elementen van de unordered list van het nav-blok gaat/
display: block;
/de a-elementen worden hier gedefinieerd als een blok en dus
kunnen we er blokeigenschappen aan toekennen/
margin-right: 20px;
width: 140px;
font-size: 14px;
line-height: 44px;
text-align: center;
text-decoration: none;
color: #000000;
}
nav ul li a:hover {
/:hover is een zogenaamde pseudo-klasse (pseudo-class).
pseudo-klassen worden gebruikt om speciale effecten
aan een selector toe te voegen. De :hover pseudo-klasse
reageert als je met de muis over dat element gaat/
color: #ffffff;
}
nav ul li.selected a {
/hier gaat het om de geselecteerde link/
color: #ffffff;
}#inhoud {
position: relative;
margin-top: 70px;
padding: 20px;
}#Binair.verstopt, #Euro.verstopt, #Credits.verstopt {
display: none;
}
#Binair.zichtbaar, #Euro.zichtbaar, #Credits.zichtbaar {
display: block;
}