Als een menu onderdeel aangeklikt wordt, moet de bijhorende inhoud div getoond worden. opsporen welke volgnr de aangeklikte li heeft via .index(). Dit is dus een nummer : 0, 1, 2, ...
De bijbehorende div heeft dan dezelfde indexwaarde. Deze kan te kiezen via .eq(nummerieke waarde). Deze div moet dus een .slideDown() doen en al de andere div's van hetzelfde niveau een .slideUp().
<div id="container">
<div id="titel">
<h1>Huisdieren!</h1>
</div>
<div id="menu">
<ul id="menulijst">
<li><a class="activated" href="#menu1">Menu 1</a></li>
<li><a class="disactivated" href="#menu2">Menu 2</a></li>
<li><a class="disactivated" href="#menu3">Menu 3</a></li>
</ul>
</div>
<div id="inhoud">
<div id="inhoud1">
<h2>Katten</h2>
<p>Tekst Katten</p>
</div>
<div id="inhoud2">
<h2>Honden</h2>
<p>Tekst honden</p>
</div>
<div id="inhoud3">
<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 type="text/javascript">
$(document).ready(function(){
$("#menu ul a").click(function(){
$("#menu ul a").removeClass('activated').addClass('disactivated');
$(this).removeClass('disactivated').addClass('activated');
});
$( "#menu ul li" ).click(function() {
var index =
});
</script>
De bijbehorende div heeft dan dezelfde indexwaarde. Deze kan te kiezen via .eq(nummerieke waarde). Deze div moet dus een .slideDown() doen en al de andere div's van hetzelfde niveau een .slideUp().
<div id="container">
<div id="titel">
<h1>Huisdieren!</h1>
</div>
<div id="menu">
<ul id="menulijst">
<li><a class="activated" href="#menu1">Menu 1</a></li>
<li><a class="disactivated" href="#menu2">Menu 2</a></li>
<li><a class="disactivated" href="#menu3">Menu 3</a></li>
</ul>
</div>
<div id="inhoud">
<div id="inhoud1">
<h2>Katten</h2>
<p>Tekst Katten</p>
</div>
<div id="inhoud2">
<h2>Honden</h2>
<p>Tekst honden</p>
</div>
<div id="inhoud3">
<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 type="text/javascript">
$(document).ready(function(){
$("#menu ul a").click(function(){
$("#menu ul a").removeClass('activated').addClass('disactivated');
$(this).removeClass('disactivated').addClass('activated');
});
$( "#menu ul li" ).click(function() {
var index =
});
</script>