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)	
	});
}

[NoSmoking]

Bonjour,
tu pourrais également tirer avantage de l'utilisation des conditions ternaire.

Code :

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

1
2
3
for (var j = 0 ; j < c ; j++) {
  liens[j].className =  liens[j] === this ? 'bordure' : '';
}

[rocketter]

Merci de vos propositions, la difficulté c'est que je n'ai pas une seule classe définie pour tous les liens, mais autant de classes que de services ; ces classes sont définis sur un hover : chaque service a une bordure de couleur différente au survol de la souris. Les liens sont sans bordures sinon.

du coup j'ai fait 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
function verifBordure() {
	for (var i = 0, c = liens.length ; i < c ; i++) {
		liens[i].addEventListener("click",function(){
			for (var j = 0, d = liens.length ; j < d ; j++) {
				liens[j].style.borderBottom = 'none';
				liens[j].style.opacity = 0.4;
			}, false);}
}}
 
service1.addEventListener('mouseup', function() {
verifBordure();	
service1.style.borderBottom = '10px solid #8AD551';
service1.style.opacity = 1;
}, false);
 
service2.addEventListener('mouseup', function() {
verifBordure();		
service2.style.borderBottom = '10px solid #4780D7';
service2.style.opacity = 1;
}, false);

Mais ça ne fonctionne pas ... je ne comprends pas car en cliquant sur admettons le premier lien qui s’appelle service1, arrêtez moi si j'ai tort mais il doit bien se passer ceci non ? :

1ère étape : j'ai un écouteur d'évènement qui se déclenche au mouseup

2è étape : exécution de la fonction verifBordure()

3è étape : la fonction vérifBordure parcours mon tableau de lien, chaque lien ayant un écouteur d'évènement, le premier lien qui est service1 est le lien cliqué, donc on entre dans la seconde boucle qui a pour mission d'attribuer une opacité de 0.4 à tous les liens et de retirer toutes les bordures. Une fois la seconde boucle achevée, je reviens dans la première boucle, qui va finir de parcourir mon tableau de lien, mais on n'entrera plus dans la seconde boucle car il n'y a eu que le premier lien qui a été cliqué.

4è étape : la fonction a fini son boulot ; le programme va donc ensuite attribuer une bordure de '10px solid #8AD551' et une opacité de 1 et c'est fini ; les autres éléments n'ayant pas été déclenché.

[saymoneu]

Ca ne sert à rien de définir 4 fois la même chose.

On donne une couleur de bordure à chaque lien à travers une classe

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" class="bleu">service1</a>
<a href="#service2" id="lien_service2" class="rouge">service2</a>
<a href="#service3" id="lien_service3" class="vert">service3</a>
<a href="#service4" id="lien_service4" class="jaune">service4</a>
</nav>

On définir la couleur par nom de couleur et le style de bordure

Code css :

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
a.bordure{
     border-bottom-style:solid;
     border-bottom-width:10px;
}	
.bleu{
     border-color:blue;
}
.rouge{
     border-color:red;
}
.vert{
     border-color:green;
}
.jaune{
     border-color:yellow;
}

Rien ne change dans le JS à part la ligne ou on vire la classe "bordure"

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 = liens[j].className.replace( /(?:^|\s)bordure(?!\S)/ , '' ); //cette ligne
		}
		this.className=this.className+" bordure";		
	});
}

[rocketter]

Merci Saymoneu ton code fonctionne, par contre pour ma culture perso et si tu as le temps, pourrais tu m'expliquer pourquoi le code que j'essayais ne fonctionnait pas ? Dans les 4 étapes que j'écris, j'aimerais bien savoir où je me plante si cela ne t'ennuie pas.

Merci beaucoup en tout cas.

[saymoneu]

Bien sûr

Le problème vient là de la fonction verifbordure.
Vous créez un écouteur sur le premier lien

Code javascript :

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

service1.addEventListener('mouseup', function() {...});

donc quand on clique sur ce lien, on rendre dans la boucle, la fonction verifbordure est lancée.
A l'intérieur de celle-ci, rien ne se déclenchera car vous avez redéfini un écouteur sur le même lien. À quoi ça sert? Cette fonction s'est déja déclenchée au clic sur le lien. C'est ce qui fait planter votre code. Mettez simplement ça comme fonction verifBordure et le problème ne sera plus.

Code javascript :

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

1
2
3
4
5
6
7
8
function verifBordure() {
	for (var i = 0, c = liens.length ; i < c ; i++) {
		for (var j = 0, d = liens.length ; j < d ; j++) {
			liens[j].style.borderBottom = 'none';
			liens[j].style.opacity = 0.4;
		}
        }
}

[rocketter]

Super ! franchement merci de votre coup de main et disponibilité !! Vous n'utilisez pas le paramètre booléen pour spécifier la capture ou le bouillonnement dans l'écoute d'un évènement ?