Javascript show/hide functie van meerdere contents

Door Steven Hack op 23-04-2009 13:22

1.804 views

Goedendag,

Ik had een vraagje over javascript. Ik heb een webpagina met 5 contents. c1 t/m c5. Ik heb ook 5 links, die verwijzen naar elk van de contents.
Dus Link 1 linkt naar c1 etc.
Als je op link 1 klikt moet c1 dus zichtbaar worden, maar alle andere contenten die opstaan moeten dichtklappen. Nu heb ik dit stuk code geprobeerd, maar dit lukt niet.


<script type="text/javascript">
	function visible(id) {
		if (id == 'c1') {
			document.getElementById(c2).style.display = 'none';
			document.getElementById(c3).style.display = 'none';
			document.getElementById(c4).style.display = 'none';
			document.getElementById(c5).style.display = 'none';
		}
		else {
			var c = document.getElementById(id);
			if(c.style.display == 'none') {
				document.getElementById(c2).style.display = 'none';
				document.getElementById(c3).style.display = 'none';
				document.getElementById(c4).style.display = 'none';
				document.getElementById(c5).style.display = 'none';
				c.style.display = 'block';
			}
			else {
				c.style.display = 'none';
			}
		}
	}
</script>

Als ik dit stuk code doe lukt het wel, maar hiermee gaan de niet-active contents niet dicht:


<script type="text/javascript">
	function visible(id) {
		var c = document.getElementById(id);
		if(c.style.display == 'none') {
			c.style.display = 'block';
		}
		else {
			c.style.display = 'none';
		}
	}
</script>

Mitchell

23-04-2009 13:44

jQuery. :)

Steven Hack

23-04-2009 14:10

Is het ook mogelijk zonder dat ik extra zooi moet downloaden? Want het is eigenlijk maar 1 java functie :)

Jacco Engel

23-04-2009 14:13

Java lijkt me hier ook een beetje over de top als je geen framework wil gebruiken

Steven Hack

23-04-2009 14:20

Lijkt mij de enige manier om dingen te show/hiden zonder de pagina te verversen of ligt dat aan mij?

Barry

23-04-2009 14:25

zet je contents in een array en loop er doorheen.
Als je bij de key in de array bent die moet worden weergegeven, dan zet je die visibility op block. Roep deze functie dan aan met de ID van de content die je wilt showen als parameter...

Steven Hack

23-04-2009 14:42


	<script type="text/javascript">
		function visible(id) {
			var c= new Array(5)
			c[0]="c1";
			c[1]="c2";
			c[2]="c3";
			c[3]="c4";
			c[4]="c5";
			var x=0;
			for (x=0; x<5; x++)
			{
				if (c[x] == id) {
					c[x].style.display = 'block';
				}
				else {
					c[x].style.display = 'none';
				}
			}
		}
	</script>

Zo bedoel je? Weet niet of dit zal werken aangezien ik niet echt goed ben in javascript, maar ik zal het eens testen.

Edit:

Hmm, lijkt niet echt te werken, maar ik puzzel even verder.

Jacco Engel

23-04-2009 15:06

aapjuh schreef op 23.04.2009 14:20
Lijkt mij de enige manier om dingen te show/hiden zonder de pagina te verversen of ligt dat aan mij?

Volgens mij ontgaat mijn punt je een beetje

Java != Javascript

Barry

23-04-2009 15:08

volgens mij moet je ook nog die

c[x].style.display

schrijven als

eval(c[x]).style.display

Steven Hack

23-04-2009 16:46

Klopt inderdaad, maar ik ontga hier dan het java gedeelte aangezien alles hier over javascript gaat? inclusief dat JQuery tooltje. Maargoed.

Heb even dat met eval geprobeerd maar het werkt nog steeds niet. Is dit wel mogelijk of zit er gewoon een scriptfout in?

Barry

23-04-2009 19:19

al je array items moeten wel references bevatten
dus elke item wordt zo geformat:


c[3] = document.getElementById("c3");

[edit]
Java is een andere taal/techniek dan javascript. JS is slechts een derrivaat van Java dat veel semantische en syntaxische overeenkomsten heeft, het heeft over het algemeen weinig met elkaar te maken. Binnen webdevelopment spreken we meestal van javascript of java-applets/objects
[/edit]

Reageren

Inloggen om te reageren