Discussion :

[murrigane]

Bonjour,

J'ai une petite question tout bête, pour régler un problème en javascript avec un changement de style css. Ca doit pas être très compliqué mais comme j'ai pas la méthode je vois pas du tout (oui j'avous je suis complétement paumé en javascript)

Tout d'abord le but de la manoeuvre était de colorer la cellule d'un tableau quand on clique sur le lien à l'intérieur ... Ca c'est bon c'est ok (c'est pour faire un menu style onglet)
J'ai fait un evenement sur onClick avec appel d'une deuxième class dans ma feuille Css.
Mais là ou je bloque et que cela me pose problème c'est que une fois que la seconde class est déclarer avec le onClick elle reste !
Si je clique sur le lien dans la cellule d'à coté, je me retrouve avec deux cellules coloré au lieux d'une seul par clic.
J'ai tenté avec onFocus mais sans succès.

La grande question est donc :
Comment désactivé mon evenement sur le lien précédent quand je clique sur un nouveau lien ???

pour le moment j'ai fait ceci :

Code :

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

1
2
3
4
5
6
7
 
<script type="text/javascript">
function ChangeStyle(cible)
{
document.getElementById(cible).className="OngletSelect";
}
</script>

Comme ça si je veux rajouter des trucs sur l'évenement autant qu'il soit en fonction !
Ensuite pour mes liens :

Code :

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

1
2
3
4
5
6
 
<tr>
<th scope="col" id="menu1" class="OngletUnselect"><a href="#" onClick="ChangeStyle('menu1');">RECHERCHE EXPRESS</a></th>
<th scope="col" id="menu2" class="OngletUnselect"><a href="#" onClick="ChangeStyle('menu2');" >RECHERCHE PAR CARTE</a></th>
<th scope="col" id="menu3" class="OngletUnselect"><a href="#" onClick="ChangeStyle('menu3');" >RECHERCHE PAR COLLECTION</a></th>
</tr>

Voila, si vous voyez au passage des améliorations pour ce ch'tit bout de code je suis preneuse !

Bon le but ultime est de faire un menu dynamique style onglet, j'aurais pu faire en UL et LI mais je voulais d'abort gérer les évenements

Merci d'avance pour vos réponses !

[mikemarti]

<script type="text/javascript">
function ChangeStyle(cible)
{
var ths=document.getElementById("menu").getElementsByTagName("th");
var thsSize=ths.length;
for(var i=0; i<thsSize; i++)
if(ths[i].id==cible) ths[i].className="OngletSelect";
else ths[i].className="OngletUnSelect";
}
</script>

<table id=menu>
<tr>
<th scope="col" id="menu1" class="OngletUnselect"><a href="#" onClick="ChangeStyle('menu1');">RECHERCHE EXPRESS</a></th>
<th scope="col" id="menu2" class="OngletUnselect"><a href="#" onClick="ChangeStyle('menu2');" >RECHERCHE PAR CARTE</a></th>
<th scope="col" id="menu3" class="OngletUnselect"><a href="#" onClick="ChangeStyle('menu3');" >RECHERCHE PAR COLLECTION</a></th>
</tr>
<table>

Ya peut-etre mieux....

[murrigane]

Salut Mikemarti !

Je sais pas si il y a mieux, mais en tout cas ça me va impec le bout de code que tu m'as passé. De plus j'ai capté comment il fonctionnait donc c'est nickel.

Je débute en Javascript alors c'est pas forcément évident

Merci pour ton aide en tout cas mon système fonctionne impec