Discussion :

[hugo7]

Bonjour j'ai 3 div et 3 boutons, chaque clic sur un bouton affiche le div correspondant, c'est dire le bouton 1 affiche le div1 , le bouton 2 le div 2 et le bouton 3 le div 3.
Je voudrais le faire mais sans que la page se recharge à chaque fois
D'avance merci

[Nicolas Esprit]

Bonjour,

Une fonction javascript de base fera l'affaire. Tu fais un appel à cette méthode via l'event click côté client de tes boutons. Et tu passes en paramètre le nom de la div à cache/afficher. Après tu joues sur la visibilité de l'élement div.

Une simple recherche google tous les exemples dont tu as besoin.

En espérant t'avoir aidé.

[hugo7]

Merci pour la réponse mais je n'ai pas trouvé ce que je cherchais...

[papouuu]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<script language="javascript" type="text/javascript">
function show(id) {
 
		document.getElementById(id).style.display = "block" // fonction qui affiche un élément par son id
}
 
//fonction qui permet de cacher un élément par son id
function hide(id) {
 
	document.getElementById(id).style.display = "none";
}
</script>

Tu appelle la fonction hide(id) sur le onload de ton body avec en paramêtre l'id de ta div à cacher

puis sur le onclick de ton bouton tu appelle la fonction show(id) avec toujours en paramêtre l'id de la div que tu veux afficher.

[hugo7]

Merci pour la réponse mais je n'ai pas de onload pour mon body
j'ai load , unload et preload
et pareil pour les boutons j'ai juste click.
D'avance merci.

[papouuu]

Bien sûr que tu as un onload et onclick. entre les directement dans tes balises même si l'intellisens ne te les propose pas et teste


[EDIT] (essayes avec onClientclick)

[Nicopilami]

Hello

function show(id) {

document.getElementById(id).style.display = "block" // fonction qui affiche un élément par son id
}

Si tu veux du 'tout javascript', tu peux faire un truc comme ca:
dans le head

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script language="javascript">
var tabDiv=new Array();
tabDiv[tabDiv.length]="Div1";
tabDiv[tabDiv.length]="Div2";
tabDiv[tabDiv.length]="Div3";
 
function show(DivToShow)
{
    for(var dvID in tabDiv)
    {
        var Div=document.getElementById(tabDiv[dvID]);
        Div.style.display=(Div.id==DivToShow?'block':'none');
     }
}
</script>

et dans le body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div style="display:none" id="Div1">blabla1</div>
<div style="display:none" id="Div2">blabla2</div>
<div style="display:none" id="Div3">blabla3</div>
 
<input type="button" value="show1" onclick="show('Div1')"/>
<input type="button" value="show2" onclick="show('Div2')"/>
<input type="button" value="show3" onclick="show('Div3')"/>

bye
Nico