28172 sujets

CSS et mise en forme, CSS3

[resolu] Changer le style d'un lien selon un évènement onClick

Solution trouvée par N3k0 :
la nouvelle fonction JS

var anc='';  
      
        function change(event){  
            var target = event.target || event.srcElement; 
            // ancien lien actif passé à inactif 
            if ( anc != '' ) { // on vérifie qu'il y avait bien un ancien lien actif enregistré 
                anc.className = 'inactif'; 
            } 
            // nouveau lien en actif 
            target.className = 'actif'; 
            // on stock le nouveau lien comme ancien lien actif 
            anc = target; 
        }

Appel des lien avec la fonction sur onclick :

        <a href="#" id="1" class="inactif" onclick="change(event);">Lien 1</a>
	<a href="#" id="2" class="inactif" onclick="change(event)">Lien 2</a>


Bonjour,
je voudrais changer l'apparence du lien sur l'évènement onClick, mais lorsque je clique sur un autre lien je veux que celui-ci reprenne son 1er style :

donc voila ce que j'ai commencé à coder : 

<head>
	<title></title>
	<style>
		.actif{
			color : red;
			text-decoration:underline;
		}
		
		.inactif{
			color : blue;
			text-decoration:none;
		}
	</style>
	<script>
		var anc='';
	
		function change(name){
			//ancien lien actif devient inactif
			document.getElementById(anc).className='inactif';
			//lien cliqué passé en actif
			document.getElementById(name).className='actif';
			anc=name;
		}
	</script>
</head>
<body>
	<a href="#" class="inactif" onclick="change('lien1');">Lien 1</a>
	<a href="#" class="inactif" onclick="change('lien2')">Lien 2</a>
</body>


j'ai donc fait une fonction qui redonne l'ancien style et attribue le nouveau style au lien qui vient d'être cliqué
et des liens qui composé du style de base et de l'évènement onClick()

mais lorsque je clique sur mon lien il ne change pas de style..

Une idée? une erreur ?
Modifié par mini-truc (12 May 2011 - 09:58)
Bonjour,


"anc" étant à vide au départ, la première ligne de ta fonction :
 document.getElementById(anc).className='inactif';
ne peut que te donner une erreur Javascript. tu essayes d'atteindre ".className" d'un objet undefined.

Ensuite comme le dit Tony, tes liens n'ayant pas d'id, le code :
document.getElementById(name).className='actif';

te donnera lui aussi une erreur javascript.

/!\ Toujours penser à vérifier le retour des sélecteurs tels que getElementById ou getElementByName

Puisque tu veux changer la classe de ton lien sur lequel tu cliques tu peux utiliser les évenements pour ce faire.

En ayant pour code :

<a href="#" class="inactif" onclick="change(event);">Lien 1</a> 
    <a href="#" class="inactif" onclick="change(event)">Lien 2</a>


Il est possible dans ta fonction de récupérer la " target " ( ou srcElement pour IE ) de cet event via :


function change(event){ 
    var target = event.target || event.srcElement;
}


Si tu gères bien, en gardant l'ancien tu peux arriver à un code javascript du genre :

                var anc=''; 
     
		function change(event){ 
			var target = event.target || event.srcElement;
			// ancien lien actif passé à inactif
			if ( anc != '' ) { // on vérifie qu'il y avait bien un ancien lien actif enregistré
				anc.className = 'inactif';
			}
			// nouveau lien en actif
			target.className = 'actif';
			// on stock le nouveau lien comme ancien lien actif
			anc = target;
		}

Modifié par n3k0 (11 May 2011 - 20:02)
oh oui une grosse erreur de ma part sur les id... (merci tony)
et sinon j'ai testé ta fonction neko et cela marche super bien ! Smiley smile
merci beaucoup a vous deux ^^
Sujet clos
Aller à