Ik zou 2 "class"en willen aanmaken : disactivated en activated. Initieel, bij het inlezen van de pagina, heeft het eerste menu onderdeel de class activated, en al de rest de class disactivated.
Indien een menu onderdeel aangeklikt wordt deze activated en al de andere disactivated.
Bijvoorbeeld als ik op menu 1 klik zie ik enkel de tekst van katten, de rest mag niet zichtbaar zijn. klik ik op menu 3 dan zie de tekst vissen, andere zijn dan niet zichtbaar.
Maar ik weet niet hoe de functie verder in elkaar zit? Zou iemand deze verder kunnen aanvullen? Als er iets niet duidelijk is mag je altijd reageren.
<div id="container">
<div id="titel">
<h1>Huisdieren!</h1>
</div>
<div id="menu">
<ul id="unordereList">
<li><a href="#Menu 1">Menu 1</a></li>
<li><a href="#Menu 2">Menu 2</a></li>
<li><a href="#Menu 3">Menu 3</a></li>
</ul>
</div>
<div id="inhoud">
<div id="inhoud 1">
<h2>Inhoud 1</h2>
<p>
Tekst Katten
</p>
</div>
<div id="inhoud 2">
<h2></h2>
<p>
Tekst honden
</p>
</div>
<div id="inhoud 3">
<h2>Vissen</h2>
<p>
tekst vissen
</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu ul a").click(
function() {
$("#div idinhoud").removeClass().addClass('disactivated');
$("#div idinhoud").removeClass().addClass('activated');
})
});
});
</script
Indien een menu onderdeel aangeklikt wordt deze activated en al de andere disactivated.
Bijvoorbeeld als ik op menu 1 klik zie ik enkel de tekst van katten, de rest mag niet zichtbaar zijn. klik ik op menu 3 dan zie de tekst vissen, andere zijn dan niet zichtbaar.
Maar ik weet niet hoe de functie verder in elkaar zit? Zou iemand deze verder kunnen aanvullen? Als er iets niet duidelijk is mag je altijd reageren.
<div id="container">
<div id="titel">
<h1>Huisdieren!</h1>
</div>
<div id="menu">
<ul id="unordereList">
<li><a href="#Menu 1">Menu 1</a></li>
<li><a href="#Menu 2">Menu 2</a></li>
<li><a href="#Menu 3">Menu 3</a></li>
</ul>
</div>
<div id="inhoud">
<div id="inhoud 1">
<h2>Inhoud 1</h2>
<p>
Tekst Katten
</p>
</div>
<div id="inhoud 2">
<h2></h2>
<p>
Tekst honden
</p>
</div>
<div id="inhoud 3">
<h2>Vissen</h2>
<p>
tekst vissen
</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu ul a").click(
function() {
$("#div idinhoud").removeClass().addClass('disactivated');
$("#div idinhoud").removeClass().addClass('activated');
})
});
});
</script
Laatst bewerkt: