Bonjour à tous,

J'ai un calendrier d'une quarantaine de jours, je veux qu'en cliquant sur un jour du calendrier apparaisse un texte unique pour chaque jour et changer la couleur du jour sélectionné.

Pour faire cela j'ai donc mes jours :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
<a href="#" onclick="showHide1()" id="j_1">1</a>
<a href="#" onclick="showHide2()" id="j_2">2</a>
<a href="#" onclick="showHide3()" id="j_3">3</a>
<a href="#" onclick="showHide4()" id="j_4">4</a>
...
Donc en cliquant sur jour 1, ça déclenche showHide1(), ...

Les textes :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
<div id="1" style="display:none;"> texte du jour 1 </div> ...
Ensuite j'ai le javascript :

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
17
18
19
20
21
22
23
24
25
26
27
28
 
function showHide1() {
	document.getElementById('1').style.display = ''; 
        document.getElementById('j_1').style.background = 'red';
 
        document.getElementById('2').style.display = 'none';
        document.getElementById('j_2').style.background = 'black';
 
        document.getElementById('3').style.display = 'none';
        document.getElementById('j_3').style.background = 'black';
 
        ...
}
 
function showHide2() {
	document.getElementById('1').style.display = 'none';
        document.getElementById('j_1').style.background = 'black';
 
        document.getElementById('2').style.display = '';
        document.getElementById('j_2').style.background = 'red';
 
        document.getElementById('3').style.display = 'none';
        document.getElementById('j_3').style.background = 'black';
 
        ...
}
 
...
Je pense que vous commencez à comprendre le problème : la longueur du code final !

En effet, en cliquant sur un jour, il ne faut pas seulement que ça "l'active" en rendant visible le texte et en changeant la couleur mais il faut aussi que ça "désactive" tous les autres jours en rendant invisible les textes et en mettant une couleur différente du jour sélectionné.

Donc je vous ai dit que j'avais une quarantaine de jours alors visualisez la longueur du code !

Il faut 40 fonctions showHide() et dans chacune de ses fonctions il faut 40 lignes pour désactiver tous les jours sauf un.

Merci de m'aider si vous avez une solutions permettant de faire beaucoup moins de lignes.