Creer un lien vers un point d'ancrage "enfant"

Par Jibé Delajungle, il y a 7 ans

Les bases HTML/CSS

Bonjour !
Comme indiqué dans mon titre, je me trouve en ce moment face à un casse-tête concernant des points d'ancrage.

Pour le site d'un institut de "formation spirituelle", j'ai crée un lexique sous forme de div modale (qui s'affiche donc par un lien avec point d'ancrage correspondant à l'ID de la div modale).

Ce que je fais

Le code pour mes liens vers la div modale :

<a href="#definition" data-toggle="modal" data-target="#madivmodale" alt="Lexique"> Lien </a>

Le code de la div modale :

<div class="portfolio-modal modal fade" id="madivmodale" tabindex="-1" role="dialog" aria-hidden="true" > <div id="content-sliderstart"> <div class="close-modal" data-dismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2" style="z-index: 1450 !important;"> <div class="modal-body"> <div id="definition"> [ Le contenu ] </div> <button type="button" class="btn btn-primary" data-dismiss="modal" style="color: #FFF;"><i class="fa fa-times"></i> Fermer</button> </div> </div> </div> </div> </div> </div>

Et côté js, je ne copie pas, le code parce qu'il me semble trè slong (et que je ne maîtrise pas le js), mais j'utilise simplement un template bootstrap, donc c'est le code contenu dans le fichier classique boostrapmin.js

Ce que je veux

Pour rendre le lexique plus efficace, j'ai crée un id pour chacune des définitions présentes à l'intérieur.
L'idée étant de créer un lien sur un mot dans le corps de texte, qui renverrait directement à la définition correspondant au mot, au sein de la div modale.

En somme, j'aimerai créer un lien qui renverrai vers un id dans un id...
Une idée de comment je pourrai m'y prendre ?

Ce que j'obtiens

Je pensais avoir trouvé la solution en jouant avec l'attribut href et l'attribut data-target (qui permet également d'afficher la div par le biais de son id).
Donc je pensais qu'en activant la div modale avec le data-target, je pouvais ensuite "naviguer" dedans en utilisant le href, mais ça ne fonctionne pas, la div modale s'affiche quand même en haut de page... :/

Merci d'avance pour vos réponses !

4 réponses

cattleyas10, il y a 7 ans

salut, tes définitions sont stocké dans quoi ?

Jibé Delajungle, il y a 7 ans

Salut !

Les definitions sont stockées dans la div modale (tout ce qui est résumé par [Le contenu] ) :

<div class="portfolio-modal modal fade" id="madivmodale" tabindex="-1" role="dialog" aria-hidden="true" > <div id="content-sliderstart"> <div class="close-modal" data-dismiss="modal"> <div class="lr"> <div class="rl"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2" style="z-index: 1450 !important;"> <div class="modal-body"> <div id="definition"> [ Le contenu ] </div> <button type="button" class="btn btn-primary" data-dismiss="modal" style="color: #FFF;"><i class="fa fa-times"></i> Fermer</button> </div> </div> </div> </div> </div> </div>
cattleyas10, il y a 7 ans

ca serais peut être pas mal de créer un fichier js contenant simplement un tableau associatif dans lequel sont stockés toutes les définitions par exemple

var dictionnaire = { "mot1" : definition mot1, "mot2" : definition mot2,.... };

ensuite une boucle pour générer le contenu de ton modal

//recupère le container de définition var container = document.getElementById('definition'); //on parcours le tableau for(var key in dictionnaire){ //récupère le mot var mot = key ; //récupère la définition var definition = dictionnaire[key]; //on crée la div dans le container var div1 = document.createElement('div'); div1.id =mot; var p1 = document.createElement('p'); p1.textContent = mot; var p2= document.createElement('p'); p2.textContent = definition; div1.appendChild(p1); div1.appendChild(p2); container.appendChild(div1); }

et après soit tu refais une boucle pour générer tes liens soit tu le fait à la main avec en attribut href "#mot"
En espérant que ca puisse t'aider un peu ^^

Jeffrey9111, il y a 6 ans

I am really happy to say it’s an interesting post to read. I learn new information from your article , you are doing a great job. Keep it up