Kann mir jemand sagen, wieso dieser code nicht funktioniert?
Eigentlich sollten es so funktionieren:
klick auf Illustration = rotes feld erscheint
klick auf graphic = blaues feld erschein
usw
Eigentlich sollten es so funktionieren:
klick auf Illustration = rotes feld erscheint
klick auf graphic = blaues feld erschein
usw
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
#hiddendiv1{
height:120px;
width:120px;
background-color:red;
}
#hiddendiv2{
height:120px;
width:120px;
background-color:blue;
}
#hiddendiv3{
height:120px;
width:120px;
background-color:green;
}
#hiddendiv4{
height:120px;
width:120px;
background-color:black;
}
a{text-decoration:none; color: black;}
</style>
</head>
<body>
<script>
$ ("#hiddendiv1").hide();
$ (".illustration").on("click", function(e){
e.preventDefault();
$ ("#hiddendiv1").toggle();
$ ("#hiddendiv2").hide();
$("#hiddendiv3").hide(); $ ("#hiddendiv4").hide();
});
$("#hiddendiv2").hide();
$(".graphic").on("click", function(e){
e.preventDefault();
$("#hiddendiv1").hide();
$("#hiddendiv3").hide(); $("#hiddendiv4").hide();
$("#hiddendiv2").toggle();
});
$("#hiddendiv3").hide();
$(".visual").on("click", function(e){
e.preventDefault();
$("#hiddendiv3").toggle();
$("#hiddendiv1").hide();
$("#hiddendiv2").hide(); $("#hiddendiv4").hide();
});
$("#hiddendiv4").hide();
$(".others").on("click", function(e){
e.preventDefault();
$("#hiddendiv4").toggle();
$("#hiddendiv1").hide();
$("#hiddendiv3").hide(); $("#hiddendiv2").hide();
});
</script>
<header>
<div class="illustration"><a href="#">ILLUSTRATION</a></div>
<div class="graphic"><a href="#">GRAPHIC</a></div>
<div class="visual"><a href="#">VISUAL ARTS</a></div>
<div class="others"><a href="#">OTHERS</a></div>
</header>
<section class="box1">
<div id="hiddendiv1">hallo</div>
<div id="hiddendiv2">du</div>
<div id="hiddendiv3">wir</div>
<div id="hiddendiv4">ihr</div>
</section>
</body>
</html>