webdevh13.1

<!-- 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.