Javascript show/hide functie van meerdere contents
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<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>
function visible(id) {
var c = document.getElementById(id);
if(c.style.display == 'none') {
c.style.display = 'block';
}
else {
c.style.display = 'none';
}
}
</script>
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...
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
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.
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack
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
Code (php)
1
c[x].style.display
schrijven als
Code (php)
1
eval(c[x]).style.display
Heb even dat met eval geprobeerd maar het werkt nog steeds niet. Is dit wel mogelijk of zit er gewoon een scriptfout in?
dus elke item wordt zo geformat:
Code (php)
1
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
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
Gewijzigd op 01/01/1970 01:00:00 door Barry
@Merijn: standaard zichtbaar, en dan onload display: none;
Maar zolang ik niet weet hoe ik meerdere display's tegelijk op none kan zetten, schiet dat niet echt op.
Het lukt verder nog niet echt, ik heb op dit moment het volgende:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
function visible(id) {
var c= new Array(4)
c[0]=document.getElementById("c2");
c[1]=document.getElementById("c3");
c[2]=document.getElementById("c4");
c[3]=document.getElementById("c5");
var x=0;
for (x=0; x<4; x++)
{
if (c[x] == id) {
eval(c[x]).style.display = 'block';
}
else {
eval(c[x]).style.display = 'none';
}
}
}
</script>
function visible(id) {
var c= new Array(4)
c[0]=document.getElementById("c2");
c[1]=document.getElementById("c3");
c[2]=document.getElementById("c4");
c[3]=document.getElementById("c5");
var x=0;
for (x=0; x<4; x++)
{
if (c[x] == id) {
eval(c[x]).style.display = 'block';
}
else {
eval(c[x]).style.display = 'none';
}
}
}
</script>
Een voorbeeld is te zien op: www.stevenhack.nl/JapanCss/test.php
Kan nergens vinden of dit uberhaupt mogelijk is, 4 keer achter elkaar getElementById gebruiken. Weet verder niets van javascript opzich. Iemand die me hier mee kan helpen?
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function visible(id) {
for(var i=2;i <= 5;i++) {
if(id == i) { var display = 'block'; } else { var display = 'none'; }
document.getElementById('c'+i).style.display = display;
}
}
for(var i=2;i <= 5;i++) {
if(id == i) { var display = 'block'; } else { var display = 'none'; }
document.getElementById('c'+i).style.display = display;
}
}
Niet getest...
Mitchell schreef op 25.04.2009 10:23:
Beetje overkill om een framework te gebruiken voor 1 ding?Zoveel moeite en zoveel dagen verspild voor iets wat in een paar seconden kan worden opgelost door een framework te gebruiken..
Hartelijk dank voor de edit WillemJan, het werkt perfect! Echt zeer bedankt _o_
En ook de rest bedankt voor jullie bijdrage.