Div verdwijnt bij klikken

Status
Niet open voor verdere reacties.
D

dikke vetklep

Gebruiker
Lid geworden
15 jan 2010
Berichten
12
Ik heb een probleem met een div. Alles werkt zoals het hoort, maar als ik op de div zelf klik, verdwijnt het en moet je opnieuw op de link klikken.
Alles moet dus blijven zoals het is (het zij via een andere manier of niet), maar als je op de tekst klikt, moet er niets gebeuren.
(Zoals het is: een floating menu en links naar divs in dezelfde pagina, zodat niet alles op de pagina staat, maar pas komt nadat je op de link klikt.)

Mijn code:

<link rel="stylesheet" href="images/tekst.css" type="text/css" />
<head><script type="text/javascript" src="disableSelect.js"></script>
<script type="text/javascript">
function show(johnnypark) {

var d, i = 1;
while(d= document.getElementById('div'+(i++))) {
d.style.display="none";
}
var el = document.getElementById(johnnypark);
el.style.display ="block";
el.style.zIndex =i;
el.onclick = function() {this.style.display ="none";}

}
</script>
</head>
<body>


<style>
div.floating-menu {position:fixed;background:#090807;border:1px solid #99CC33;width:540px;z-index:100;}

</style>
<div class="floating-menu">
<p>Klik op een artikel om het te lezen.<br>
<a href="javascript:show('div1')"> Artikel 1 </a> |
<a href="javascript:show('div2')"> Artikel 2 </a> |
<a href="javascript:show('div3')"> Artikel 3 </a> |
<a href="javascript:show('div4')"> Artikel 4 </a> |
<a href="javascript:show('div5')"> Artikel 5 </a> |
<a href="javascript:show('div6')"> Artikel 6 </a> |
<a href="javascript:show('div7')"> Artikel 7 </a> |
<a href="javascript:show('div8')"> Artikel 8 </a> |
<a href="javascript:show('div9')"> Artikel 9 </a> |
<a href="javascript:show('div10')"> Artikel 10 </a> |
</p></div>


<style type="text/css">
.myclass { position:absolute; left:0px; top:100px; text-indent:40px; display:none;}
</style>
<div class="myclass" id="div1" ><h3>Eerste artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
</div>
<div class="myclass" id="div2" ><h3>Tweede artikel</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
<br>

</div>
<div class="myclass" id="div3" ><h3>Derde artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div4" ><h3>Vierde artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div5" ><h3>Vijfde artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div6" ><h3>Zesde artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div7" ><h3>Zevende artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div8" ><h3>Achtste artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div9" ><h3>Negende artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>
<div class="myclass" id="div10" ><h3>Tiende artikel</h3>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>

</div>



</body>
</html>
Klik om te vergroten...

Ik hoop dat jullie het weten :)
 
Laatst bewerkt:
Waarom gebruik je niet de functie hide()/show van jQuery?

dus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<title>een leuke titel...</title>
</head>
<body>
<a href="#"  onClick="$('#div1').show()" > Artikel 1 >laat zien<</a>
<a href="#"  onClick="$('#div2').hide()" > Artikel 2 > haal weg<</a>
<br />
<div id="div1" style="display:none;">Artikel 1: blablabalbalabalbalbla</div>
<div id="div2">Artikel 2: blablabalbalabalbalbla</div>
</body>


meer info: www.jquery.com
 
voor leuke effecten kun je ook nog show('slow') of hide(2000) gebruiken...

Er zijn ook nog meer leuke animerende functies.

fadeIn()
fadeOut()
slideUp()
slideDown()
 
Uitverveling heb ik voor je de pagina afgemaakt voor je. Als je nu op een link klikt zal de div geopend worden en klik je op een andere link dan verdwijnt de vorige div weer.

ook heb ik je hele pagina even goed gezet qua <style> en alles overzichtelijker gemaakt.

HTML: 
<html>
	<head>
		<link rel="stylesheet" href="images/tekst.css" type="text/css" />
		<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
		<title>Titel van de pagina</title>
		<style>
			div.floating-menu {
				position: fixed;
				background: #090807;
				border: 1px solid #99CC33;
				width: 540px;
				z-index: 100;
			}
			.myclass{
				display: none;
				position:absolute; 
				left:0px; 
				top:100px; 
				text-indent:40px;
			}
		</style>
	</head>
	<body>
		<div class="floating-menu">
			<p>Klik op een artikel om het te lezen.<br>
				<a href="#" onClick="$('.myclass').hide(); $('#div1').show();" > Artikel 1 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div2').show();"> Artikel 2 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div3').show();"> Artikel 3 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div4').show();"> Artikel 4 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div5').show();"> Artikel 5 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div6').show();"> Artikel 6 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div7').show();"> Artikel 7 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div8').show();"> Artikel 8 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div9').show();"> Artikel 9 </a> |
				<a href="#" onClick="$('.myclass').hide(); $('#div10').show();"> Artikel 10 </a> |
			</p>
		</div>
		<div class="myclass" id="div1" >
			<h3>Eerste artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div2" >
			<h3>Tweede artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br><br>
		</div>
		<div class="myclass" id="div3" >
			<h3>Derde artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div4" >
			<h3>Vierde artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div5" >
			<h3>Vijfde artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div6" >
			<h3>Zesde artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div7" >
			<h3>Zevende artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div8" >
			<h3>Achtste artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div9" >
			<h3>Negende artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
		<div class="myclass" id="div10" >
			<h3>Tiende artikel</h3>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.<br>
		</div>
	</body>
</html>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan