Comment créer un lien vers une note de bas de page en HTML?
https://stackoverflow.com/questions/66964
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Par exemple:
Ceci est le corps principal de mon contenu. j'ai un lien de note de bas de page pour cette ligne [1]. Ensuite, j'ai un peu plus contenu. Certains sont intéressants et ça a également quelques notes de bas de page [2].
[1] Voici ma première note de bas de page.
[2] Une autre note de bas de page.
Donc, si je clique sur le " [1] " link, il dirige la page Web vers la première référence de note de bas de page et ainsi de suite. Comment puis-je accomplir cela en HTML?
La solution
Attribuez un identifiant à un conteneur, puis utilisez # pour faire référence à cet identifiant.
par exemple
<p>This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.</p>
<p id="footnote-1">[1] Here is my first footnote.</p>
<p id="footnote-2">[2] Another footnote.</p>
Autres conseils
Il est judicieux de fournir un lien entre la note de bas de page et sa référence (en supposant qu'il existe une relation 1: 1). Cela est utile car le bouton Précédent ramène l'utilisateur à la position de défilement précédente, laissant ainsi au lecteur le soin de trouver sa place dans le texte. En cliquant sur un lien pour revenir à l'endroit où la note de bas de page a été référencée dans le texte, ce texte est placé en haut de la fenêtre, ce qui permet au lecteur de reprendre facilement où il s'est arrêté.
Quirksmode a une page sur les notes de bas de page sur le Web ( Bien que cela suggère que vous utilisiez sidenotes au lieu des notes de bas de page, je pense que les notes de bas de page sont plus accessibles , avec un lien vers la note de bas de page et la note de bas de page suivie d'un lien vers le texte, je suppose qu'ils seraient plus faciles à suivre avec un lecteur d'écran ).
L'un des liens de la page quirksmode suggère d'avoir une flèche, & # 8617 ;, après le texte de la note de bas de page faisant le lien, et d'utiliser l'entité & amp; # 8617; pour cela.
exemple:
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote. <a href="#footnote-1-ref">↩</a>
</p>
<p id="footnote-2">
2. Another footnote. <a href="#footnote-2-ref">↩</a>
</p>
Je ne suis cependant pas sûr de savoir comment les lecteurs d'écran géreraient l'entité. Le commentaire de l'article de Grubber est lié au l'article de Bob Eastern sur l'accessibilité des notes de bas de page qui le suggère. n'est pas lu, bien que cela se soit passé il y a quelques années et j'espère que les lecteurs d'écran se seront améliorés maintenant. Pour l'accessibilité, il pourrait être intéressant d'utiliser une ancre de texte telle que & Quot; return to text & Quot; ou peut-être le mettre dans l'attribut title du lien. Cela vaut également peut-être la peine d’en ajouter un à la note de bas de page originale, bien que je ne sache pas comment les lecteurs d’écran le géreraient.
This is main body of my content.
I have a footnote link for this line
<a id="footnote-1-ref" href="#footnote-1" title="link to footnote">[1]</a>.
Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a id="footnote-2-ref" href="#footnote-2" title="link to footnote">[2]</a>.
<p id="footnote-1">
1. Here is my first footnote.
<a href="#footnote-1-ref" title="return to text">↩</a>
</p>
<p id="footnote-2">
2. Another footnote.
<a href="#footnote-2-ref" title="return to text">↩</a>
</p>
(Je ne fais que deviner sur les problèmes d’accessibilité ici, mais comme cela n’a été abordé dans aucun des articles que j’ai mentionnés, j’ai pensé que cela valait la peine d’être abordé. Si quelqu'un pouvait parler avec plus de pouvoir sur la question, être intéressé d'entendre.)
Vous commencez par insérer une balise d'ancrage avec un attribut name devant chaque note de bas de page.
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
Cette balise d'ancrage ne sera pas un lien. Ce sera juste une section nommée de la page. Ensuite, vous faites du marqueur de note de bas de page une balise qui fait référence à cette section nommée. Pour faire référence à une section nommée d'une page, utilisez le signe #.
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
Si vous souhaitez créer un lien vers cette section à partir d'une autre page, vous pouvez également le faire. Il suffit de lier la page et de coller le nom de la section dessus.
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
Vous devrez configurer des balises d'ancrage pour toutes vos notes de bas de page. Les préfixer avec quelque chose comme ceci devrait le faire:
< un nom = " FOOTNOTE-1 " > [1] < / a >
Puis, dans le corps de votre page, créez un lien vers la note de bas de page comme suit:
< a href = & "; # FOOTNOTE-1 &"; > [1] < / a >
(notez l'utilisation des attributs nom par rapport aux attributs href )
En gros, chaque fois que vous définissez le nom d'une balise A, vous pouvez y accéder en créant un lien vers # NAME-USED-IN-TAG.
http://www.w3schools.com/HTML/html_links.asp contient davantage d'informations .
Dans votre cas, vous feriez probablement mieux de le faire avec des balises a-href et des balises a-name dans vos liens et pieds de page, respectivement.
Dans le cas général du défilement vers un élément DOM, il existe un plug-in jQuery . . Mais si la performance pose problème, je suggérerais de le faire manuellement. Cela implique deux étapes:
- Recherche de la position de l'élément sur lequel vous faites défiler.
- Défilement jusqu'à cette position.
quirksmode donne une bonne explication du mécanisme qui le sous-tend. Voici ma solution préférée:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Il utilise le casting de null à 0, ce qui n’est pas une étiquette appropriée dans certains cercles, mais j’aime bien :) La deuxième partie utilise window.scroll. Le reste de la solution est donc:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Voila!
La réponse de Peter Boughton est bonne, mais cela pourrait être mieux si au lieu de déclarer la note de bas de page comme & "; p &"; (paragraphe), vous avez déclaré comme " li " (item-list) dans un " ol " (liste-ordonnée):
This is main body of my content. I have a footnote link for this line <a href="#footnote-1">[1]</a>. Then, I have some more content. Some of it is interesting and it has some footnotes as well <a href="#footnote-2">[2]</a>.
<h2>References</h2>
<ol>
<li id="footnote-1">Here is my first footnote.</li>
<li id="footnote-2">Another footnote.</li>
</ol>
Ainsi, il n'est pas nécessaire d'écrire le numéro en haut et en dessous ... tant que les références sont répertoriées dans le bon ordre ci-dessous.
balises d'ancrage utilisant des ancres nommées
Utilisez les signets dans les balises d'ancrage ...
This is main body of my content. I have a footnote link for this
line <a href="#foot1">[1]</a>. Then, I have some more content.
Some of it is interesting and it has some footnotes as well
<a href="#foot2">[2]</a>.
<div>
<a name="foot1">[1]</a> Here is my first footnote.
</div>
<div>
<a name="foot2">[2]</a> Another footnote.
</div>
Ceci est le corps principal de mon contenu. J'ai un lien de note de bas de page pour cette ligne [1]. Ensuite, j'ai un peu plus de contenu. Certaines sont intéressantes et contiennent également des notes de bas de page [2].
[1] Voici ma première note de bas de page.
[2] Une autre note de bas de page.
Faites < une href = # tag > text < / a >
et ensuite à la note de bas de page: < une balise name = " " > text < / a >
Tout sans espaces. Référence: http://www.w3schools.com/HTML/html_links.asp
< un nom = & "1 &"; > Note de bas de page < / a >
bla bla
< a href = & "; # 1 &"; > allez < / a > vers la note de bas de page.
