Discussion :

[rocketter]

Bonjour,

j'aimerais effectuer une condition dés que je clique sur un lien de mon site mais je ne vois pas trop comment faire ...

en HTML j'ai ceci :

Code html :

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

1
2
3
4
5
6
<nav id="liens_services">
	<a href="#service1" id="lien_service1">service1</a>
	<a href="#service2" id="lien_service2">service2</a>
	<a href="#service3" id="lien_service3">service3</a>
	<a href="#service4" id="lien_service4">service4</a>
</nav>

en Javascript, je pensais commencé ainsi :

Code :

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

1
2
3
4
5
6
7
8
9
var i = 0;
var service1 = document.getElementById('lien_service1');
var liens = document.getElementById('liens_services').getElementsByTagName('a');
 
if (liens[i].addEventListener)
{
service1.style.borderBottom = '10px solid #8AD551';
service1.style.opacity = 1;
}, false); }

Mais le code à l'intérieur de la condition ne s'exécute pas, par contre sans la condition, c'est bon.

La syntaxe de la condition ne doit pas être bonne, pourriez vous m'aider svp ?

[saymoneu]

Bonjour,

En effet, il y a un problème dans votre code là.
Je vous conseille de créer une boucle pour rajouter un écouteur d'événement sur chaque lien, de controler quel lien est cliqué et de lui appliquer le style que vous souhaitez.

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
var i = 0;
var liens = document.getElementById('liens_services').getElementsByTagName('a');
 
for(i=0;i<liens.length;i++){
	liens[i].addEventListener("click",function(){
		var service = this.getAttribute('id');
		document.getElementById(service).style.borderBottom = '10px solid #8AD551';
		document.getElementById(service).style.opacity = 1;
	});
}

[rocketter]

Merci de l'info saymoneu, par contre comment faire dans cette boucle for pour affecter un style, au clic d'un lien, à tous les liens par exemple ?

J'ai souhaité faire ceci :

Code :

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

1
2
3
4
5
6
 
for (var i = 0, c = liens.length ; i < c ; i++) {
	liens[i].addEventListener("click",function(){
	liens[i].style.opacity = 1;	
		}, false);
	}

mais cela n'a pas fonctionné.

[saymoneu]

Avec plaisir

Je ferais une 2e boucle à l'intérieur. Vous ne faisiez un traitement que sur le lien cliqué en utilisant la variable i dans la boucle d'évenement.

Code javascript :

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

1
2
3
4
5
6
7
for (var i = 0, c = liens.length ; i < c ; i++) {
	liens[i].addEventListener("click",function(){
		for (var j = 0 ; j < c ; j++) {
			liens[j].style.opacity = 1;
		}		
	});
}

[rocketter]

J'te remercie c'est pas mal ça, mon but en fait c'est d'avoir une bordure de couleur sur chaque lien sur lequel on va cliquer, et que cette bordure disparaisse à chaque fois que l'on clique sur un autre lien, du coup c'est uniquement sur un seul lien que l'on a une bordure colorée : celui sur lequel on clique.

Avec tes indications, j'ai bidouillé ce code :

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
var result = false;
 
function verifBordure() {
	for (var j = 0, d = liens.length ; j < d ; j++) {
			liens[j].style.borderBottom = 'none';
			liens[j].style.opacity = 0.4;
			}};
	}
}
 
if (result) {verifBordure();}
 
service1.addEventListener('mouseup', function() {
service1.style.borderBottom = '10px solid #8AD551';
service1.style.opacity = 1;
result = true;
}, false); 
 
if (result) {verifBordure();}
 
service2.addEventListener('mouseup', function() {
service2.style.borderBottom = '10px solid #8AD551';
service2.style.opacity = 1;
result = true;
}, false);

j'ai retiré du coup la double boucle, car je m'aperçois que je ne vais pas besoin avoir d'un contrôle sur chaque lien, je veux tout remettre à l'origine sur tous els liens dés que ma variable result est à true.

Mais ça ne fonctionne pas ... alors que ton code seul est ok

PS : je viens de vérifier avec la double boucle, ça ne fonctionne pas non plus : mes liens restent avec leur bordure ; sans la double boucle, les liens n'ont aucune bordure quand je clique dessus ...

[saymoneu]

Il vaut mieux jouer sur les classes là ce sera plus clair (on rajoute une classe sur un lien cliqué)

Code css :

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

1
2
3
a.bordure{
	border:1px solid red;
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
var i = 0;
var liens = document.getElementById('liens_services').getElementsByTagName('a');
 
for (var i = 0, c = liens.length ; i < c ; i++) {
	liens[i].addEventListener("click",function(){
		for (var j = 0 ; j < c ; j++) {
			liens[j].className = "";// On enlève la classe "bordure" aux liens...
		}
		this.className=this.className+" bordure";// Avant de la rajouter seulement au lien cliqué (this)	
	});
}