Script JS qui fonctionne partiellement pour des ancres

Version imprimable

Bonjour,

J'aimerais surligner mes liens ancrés quand on arrive dessus.
Précisions concernant mes fichiers et mes codes:
- Dans mon dossier parent j'ai : index.html, style.css et script.js
- Dans mon sous dossier j'ai : plusieurs fichier a.html, b.html, c.html.....
Code:

1 2 3 4 5 6 7 8 function highlight_ancre() { var ancre_id = window.location.hash.replace('#', '') var elem = document.getElementById(ancre_id); if (elem) { elem.classList.add('ancre-active'); } } window.onload = highlight_ancre;
Le code ci-dessus fonctionne très bien lorsque je clique sur mon lien dans index.html(dossier parent) et qui me renvoie bien dans a.html(sous-dossier) avec le surlignage de la ligne.
Par contre dans mon fichier a.html j'ai plusieurs ancres mais le surlignage ne fonctionne pas.
Exemple de code d'ancre dans mon fichier a.html:

Code:

<li><a href="#mess">.........................</a></li>

Code:

<li id="mess"><a id="g">....................</a></li>

J'ai cherché des infos, modifier le code... Toutes mes tentatives se sont révélées infructueuses.
J'ai besoin de votre aide.
Merci par avance

23/09/2019, 10h58
danielhagnoul

:salut:

Je vois que vous faites appel à votre fonction lors du chargement de votre fichier index.html par window.onload = highlight_ancre;.

Le fichier script.js est-il disponible dans chaque nouvelle page ?

Je pense qu'il faut appeler la fonction dans la nouvelle page à chaque changement de page.

Bonjour,

à priori, les liens <a href="#ancre"> ne "rechargent" pas la page.
Il faut donc créer un évènement sur le click.

Code:

1
2
3
4
5
6
7
8
<ul id="ancres_liens">
	<li><a href="#ancre1">ancre1</a></li>
	<li><a href="#ancre2">ancre2</a></li>
	<li><a href="#ancre3">ancre3</a></li>
</ul>
<div id="ancre1">ancre1....................</div>
<div id="ancre2">ancre2....................</div>
<div id="ancre3">ancre3....................</div>

Code:

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
26
27
28
<script>
"use strict";
const ancres_liens = document.querySelectorAll('#ancres_liens li a');
const ancres_divs = document.querySelectorAll('.ancre');
function highlight_ancre(ancre_id) {
	ancres_divs.forEach(function(div){
		div.classList.remove('ancre-active');
	});
  if( ancre_id != '' )
  {
	console.log( ancre_id) ;
	var elem = document.getElementById(ancre_id);
	if (elem) {
	elem.classList.add('ancre-active');
	}
  }
}
window.onload  = function(e){
	var ancre_id = window.location.hash.replace('#', '');
	highlight_ancre(ancre_id);
};
ancres_liens.forEach(function(link){
	link.addEventListener('click',function(){
		var ancre_id = this.getAttribute('href').replace('#', '');
		highlight_ancre(ancre_id);
	});
});
</script>

24/09/2019, 20h03
jeramej

Bonjour,

jreaux62 Merci pour cette aide et ce code incroyable. Je pouvais chercher encore longtemps lol. D'après mes essais du coup le fichier script.js n'est plus d'utilité.

Puis-je encore solliciter tes compétences pour parfaire ce code ?
Voici ce qui ce passe quand je clique l'ancre 1 le surlignage s'effectue puis quand je clique sur l'ancre 2 le surligne s'effectue aussi mais en supplément du surlignage de l'ancre 1.

Est-il possible de supprimer le surlignage précédent le suivant ? C'est à dire que le surlignage de l'ancre 1 s'efface quand je clique sur l'ancre 2.

Sinon que me conseillerais-tu pour apprendre plus en profondeur le javascript ?

Normalement, c'est ce que fait ce bon de code :
Code:

1 2 3 ancres_divs.forEach(function(link){ link.classList.remove('ancre-active'); });

25/09/2019, 21h07
jeramej

Bonsoir jreaux62,

Pour être sûr j'ai essayer hors de mon programme, j'ai créé des fichiers test.html et style.css avec ton code html et ton script et je te confirme que ça fait pareil;) Quand je clique tour à tour sur ancre1, ancre2 et ancre3, l'ancre1 se surligne puis l'ancre1 et 2 sont surlignées puis l'ancre1 2 3 sont surlignées.

Merci pour ton aide

Oups, vu...

Normal : j'ai oublié d'ajouter la classe "ancre" sur... les ancres !

Code:

1
2
3
<div class="ancre" id="ancre1">ancre1....................</div>
<div class="ancre" id="ancre2">ancre2....................</div>
<div class="ancre" id="ancre3">ancre3....................</div>

04/10/2019, 18h59
jeramej

Bonjour,

Désolé pour ce retour assez long mais j'étais très occupé.
Je viens de tester et ça fonctionne nickel.

Merci beaucoup jreaux62
04/10/2019, 19h14
Invité

A ton service... ;) (quand on peut aider...)