Changer la couleur d'un lien actif en javascript

bonsoir,
j'ai un petit soucis, j'ai utilisé pour cacher des div avec cette fonction:
<script type="text/javascript">
function toggle(ele) {

$(".texte").hide();

$("#"+ele).show();

}
</script>
mais le lien sur lequel on clique ne garde pas la couleur quand on est dans le menu:
<td width="423px" align="center"><a href="javascript:toggle('toggleText');">
ABOUT US </a>

comment faire? je n'ai pas le niveau suffisant en js

merci d'avance
Modifié par Blackbird75 (25 Feb 2012 - 20:20)

L'objectif est de changer la couleur du texte "ABOUT US" après le clic ?

dans ce cas, dans ton fonction toggle(), ajoutes-y

$(this).css({'color':'#000000'});

évidemment, tu remplaces #000000 par la couleur que tu souhaites mettre.

Voir css() sur la doc jQuery http://api.jquery.com/css/

comme ça?
<script type="text/javascript">
function toggle(ele) {

$(".texte").hide();

$("#"+ele).show();

$(this).css({'color':'#AFAA50'});

}
</script>

ça ne marche pas, mais oui c'est about us qui doit changer de couleur et afficher le texte en dessous

<td width="423px" align="center"><a href="javascript:toggle('toggleText');">
ABOUT US </a>
<div id="toggleText" class="texte" style="display: none" align="justify"><h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</h1></div>
Modifié par Blackbird75 (25 Feb 2012 - 20:26)

Bonjour,

Blackbird75 a écrit :
le lien sur lequel on clique ne garde pas la couleur quand on est dans le menu

Je ne suis pas certain de bien cerner ton problème, mais tu sembles demander comment faire pour que la couleur d'un lien reste la même après avoir cliqué dessus? C'est bien ça?
Si c'est ça, il suffit d'utiliser le CSS.

a:link {color:black}
a:visited {color:black}
a:hover {color:red /*-- par exemple  --*/}
a:active {color:green}

Cordialement

ce serais trop simple, on ne change pas de page, c'est du javascript, tout est dans la même grace a des div cachés, les css sur les link ne servent qu'au survol,
le site est en ligne ici:http://88.191.133.175/cari2/

C'est à dire que je n'avais pas regardé la façon de faire (mauvaise) dont tu avais géré ton JS.

Le JS, on le met à part, c'est à dire que dans ton cas, tu devrais par exemple mettre une class sur tes liens.

genre <a href="#" class="couleurChange">machin</a>

et ensuite gérer le reste en JS :

(function($){

$('a.couleurChange').click(function(e) { // on a cliqué sur un des liens

e.preventDefault(); // empeche l'action du clic par défaut

// ton code
// $(this) fonctionnera et agit sur <a ... class="couleurChange">

$(".texte").hide();

$("#"+ele).show();

$(this).css({'color':'#AFAA50'});

});

});

Dans ton code actuel (moins propre), il aurait fallu retourné "this" en variable supplémentaire à ton fonction et remplacer $(this) par le nom du nouveau param.

Je n'ai pas testé, donc il est possible qu'il y ait une coquille.

ok merci pour ton aide mais je ne comprend pas ce que je fais de la fonction toggle qui est appelé pour les div cachés, je suis désolé mais je ne comprend pas comment appeler la fonction :

<script type="text/javascript">
(function($){
$('a.couleurChange').click(function(e) { // on a cliqué sur un des liens
e.preventDefault(); // empeche l'action du clic par défaut
// ton code
// $(this) fonctionnera et agit sur <a ... class="couleurChange">
$(this).css({'color':'#AFAA50'});
});
});
</script>

<script type="text/javascript">
function toggle(ele) {

$(".texte").hide();

$("#"+ele).show();

$(this).css({'color':'#AFAA50'});

}
</script>


<td width="423px" align="center"><a href="javascript:toggle('toggleText');" class="couleurChange">
ABOUT US </a>
</script>