IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Script JS qui fonctionne partiellement pour des ancres


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Septembre 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2017
    Messages : 30
    Points : 20
    Points
    20
    Par défaut Script JS qui fonctionne partiellement pour des ancres
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <li><a href="#mess">.........................</a></li>
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    <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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut


    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,

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

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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>
    Dernière modification par Invité ; 25/09/2019 à 22h42.

  4. #4
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Septembre 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2017
    Messages : 30
    Points : 20
    Points
    20
    Par défaut
    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 ?

  5. #5
    Invité
    Invité(e)
    Par défaut
    Normalement, c'est ce que fait ce bon de code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    	ancres_divs.forEach(function(link){
    		link.classList.remove('ancre-active');
    	});

  6. #6
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Septembre 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2017
    Messages : 30
    Points : 20
    Points
    20
    Par défaut
    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

  7. #7
    Invité
    Invité(e)
    Par défaut
    Oups, vu...

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

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div class="ancre" id="ancre1">ancre1....................</div>
    <div class="ancre" id="ancre2">ancre2....................</div>
    <div class="ancre" id="ancre3">ancre3....................</div>

  8. #8
    Membre à l'essai
    Homme Profil pro
    Technicien maintenance
    Inscrit en
    Septembre 2017
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Mayenne (Pays de la Loire)

    Informations professionnelles :
    Activité : Technicien maintenance
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2017
    Messages : 30
    Points : 20
    Points
    20
    Par défaut
    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

  9. #9
    Invité
    Invité(e)
    Par défaut
    A ton service... (quand on peut aider...)

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [MySQL] Upload qui fonctionne partiellement
    Par Darckoxe dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 27/12/2017, 22h42
  2. Réponses: 1
    Dernier message: 21/03/2014, 09h32
  3. Formulaire php qui fonctionne partiellement
    Par Fulgurator dans le forum Langage
    Réponses: 16
    Dernier message: 15/10/2009, 01h28
  4. Stopper un script php qui se prend pour superman
    Par supergrey dans le forum Langage
    Réponses: 2
    Dernier message: 08/06/2007, 23h12
  5. [AJAX] script ajax qui fonctionne pas tout le temps
    Par krfa1 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 30/05/2007, 12h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo