<!-- oefening 1 --> <!DOCTYPE html> <html lang="nl"> <head> <meta name="description" content="Koop hier al uw producten online!"> <meta name="keywords" content="Product 1, Product 2"> <meta name="author" content="PTH"> <title>Webwinkel</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript"> function toonVerberg(divID) { var keuze1 = document.getElementById("home"); var keuze2 = document.getElementById("klanten"); var keuze3 = document.getElementById("bestellingen"); var item = document.getElementById(divID); if (item.id == "home") { keuze1.className = "toon"; keuze2.className = "verberg"; keuze3.className = "verberg"; } if (item.id == "klanten") { keuze1.className = "verberg"; keuze2.className = "toon"; keuze3.className = "verberg"; } if (item.id == "bestellingen") { keuze1.className = "verberg"; keuze2.className = "verberg"; keuze3.className = "toon"; } }; </script> </head> <body> <h1 style="color:blue; font-weight: bold;">Menu</h1> <p>Maak een keuze:</p> <ul> <li> <a href="javascript:toonVerberg('home');">Home</a> </li> <li> <a href="javascript:toonVerberg('klanten');">Klanten</a> </li> <li> <a href="javascript:toonVerberg('bestellingen');">Bestellingen</a> </li> </ul> <div id="inhoud"> <div id="home" class="toon"> Dit is de home pagina </div> <div id="klanten" class="verberg"> Dit is de klanten pagina </div> <div id="bestellingen" class="verberg"> Dit is de bestellingen pagina </div> </div> </body> </html>
Download hier het bestand.
#home.verberg, #klanten.verberg, #bestellingen.verberg { display: none; } #home.toon, #klanten.toon, #bestellingen.toon { display: block; }
Download hier het bestand.