skifte div efter hvad a href der blir trykket på
er lidt lost. for stinker til jquery og javascript. så har set mig blind på en løsning.skal have lave en menu (inde på en side)
med 3-4 overskrifter som skal være links.
disse skal vise forskellig tekst inde i en div. hvad er den nemmeste måde at gøre dette på. har prøvet med jquery men kan ikk få det til at virke.
er det en eller anden lille latterlig fejl for at hentet fra en side hvor det skulle virke. håber i kan hjælpe
noget lign dette.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jeg vil jeg kan</title>
<link href='http://fonts.googleapis.com/css?family=Inder' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div class="container">
<div class="nav">
<ul id="menu">
<li id="link1"><a href="#">Topic One</a></li>
<li id="link2"><a href="#">Topic Two</a></li>
<li id="link3"><a href="#">Topic Three</a></li>
</ul>
</div>
<div class="main">
<div id="page1" class="content">
<h1>Page 1</h1>
<p>First section of content.</p>
</div>
<div id="page2" class="content">
<h1>Page 2</h1>
<p>Second section of content</p>
</div>
<div id="page3" class="content">
<h1>Page 3</h1>
<p>Third section of content.</p>
</div>
</div>
</div>
</body>
</html>
test.js
$('#menu a').click(function(e){
hideContentDivs();
var tmp_div = $(this).parent().index();
$('.main div').eq(tmp_div).show();
});
function hideContentDivs(){
$('.main div').each(function(){
$(this).hide();});
}
hideContentDivs();
