¿Cómo creo un enlace a una nota al pie en HTML?
https://stackoverflow.com/questions/66964
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Por ejemplo:
Este es el cuerpo principal de mi contenido.Tengo un enlace de nota al pie para esta línea [1].Entonces, tengo un poco más de contenido.Algunos de ellos son interesantes y también tiene algunas notas al pie [2].
[1] Aquí está mi primera nota a pie de página.
[2] Otra nota a pie de página.
Entonces, si hago clic en el enlace "[1]", la página web se dirige a la primera referencia de la nota al pie y así sucesivamente.¿Cómo puedo lograr esto exactamente en HTML?
Solución
Dale una identificación a un contenedor, luego usa # para referirse a ese Id.
p.ej.
<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>Otros consejos
Es una buena práctica proporcionar un enlace desde la nota al pie al lugar donde se hace referencia (suponiendo que exista una relación 1:1).Esto es útil porque el botón Atrás llevará al usuario a la posición de desplazamiento en la que se encontraba anteriormente, dejando que el lector encuentre su lugar en el texto.Al hacer clic en un enlace al lugar donde se hizo referencia a la nota al pie en el texto, se coloca ese texto en la parte superior de la ventana, lo que facilita al lector continuar donde lo dejó.
Quirksmode tiene una página en notas a pie de página en la web (aunque sugiere que uses notas al margen En lugar de notas a pie de página creo que las notas a pie de página son más accesible, con un enlace a la nota al pie y la nota al pie seguida de un enlace al texto. Sospecho que sería más fácil seguirlos con un lector de pantalla).
Uno de los enlaces de la página de modo peculiar sugiere tener una flecha, ↩, después del texto de la nota al pie que enlaza hacia atrás, y usar la entidad ↩para esto.
p.ej.:
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>
Sin embargo, no estoy seguro de cómo los lectores de pantalla manejarían la entidad.Vinculado desde los comentarios de la publicación de Grubber es Publicación de Bob Eastern sobre la accesibilidad de las notas a pie de página lo que sugiere que no se lee, aunque eso fue hace varios años y espero que los lectores de pantalla ya hayan mejorado.Para mayor accesibilidad, podría valer la pena usar un ancla de texto como "volver al texto" o quizás ponerlo en el atributo de título del enlace.También puede valer la pena poner uno en la nota a pie de página original, aunque no sé cómo lo manejarían los lectores de pantalla.
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>
(Sólo estoy adivinando sobre los problemas de accesibilidad aquí, pero como no se mencionó en ninguno de los artículos que mencioné, pensé que valía la pena mencionarlo.Si alguien puede hablar con más autoridad sobre el tema, me interesaría escucharlo).
Primero ingresa y coloca una etiqueta de anclaje con un atributo de nombre delante de cada nota al pie.
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
Esta etiqueta de anclaje no será un enlace.Será simplemente una sección con nombre de la página.Luego, convierte el marcador de nota al pie en una etiqueta que hace referencia a esa sección nombrada.Para hacer referencia a una sección con nombre de una página, utilice el signo #.
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
Si desea vincular esa sección desde otra página, también puede hacerlo.Simplemente vincule la página y agregue el nombre de la sección.
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
Deberá configurar etiquetas de anclaje para todas sus notas al pie.Prefijarles algo como esto debería bastar:
< a nombre="NOTA AL PIE-1">[ 1 ]</a>
Luego, en el cuerpo de su página, enlace a la nota al pie como esta:
< a href="#FOOTNOTE-1">[ 1 ]</a>
(tenga en cuenta el uso de la nombre contra el href atributos)
Básicamente, cada vez que estableces el nombre de una etiqueta A, puedes acceder a ella vinculando a #NOMBRE-USADO-EN-TAG.
http://www.w3schools.com/HTML/html_links.asp tiene más información.
Para su caso, probablemente sea mejor hacer esto con etiquetas a-href y etiquetas a-name en sus enlaces y pies de página, respectivamente.
En el caso general de desplazarse a un elemento DOM, existe una complemento jQuery.Pero si el rendimiento es un problema, sugeriría hacerlo manualmente.Esto implica dos pasos:
- Encontrar la posición del elemento al que se está desplazando.
- Desplazarse hasta esa posición.
en modo capricho Da una buena explicación del mecanismo detrás del primero.Aquí está mi solución preferida:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Utiliza conversión de nulo a 0, lo cual no es la etiqueta adecuada en algunos círculos, pero me gusta :) La segunda parte usa window.scroll.Entonces el resto de la solución es:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
¡Voilá!
La respuesta de Peter Boughton es buena, pero podría ser mejor si en lugar de declarar la nota al pie como "p" (párrafo), la declararas como "li" (elemento de lista) dentro de un "ol" (lista ordenada):
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>
De esta manera, no es necesario escribir el número arriba, y abajo...siempre y cuando las referencias se enumeren en el orden correcto a continuación.
etiquetas de anclaje usando anclajes con nombre
Utilice marcadores en etiquetas de anclaje...
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>
Este es el cuerpo principal de mi contenido.Tengo un enlace a pie de página para esta línea [1].Entonces, tengo más contenido.Parte de él es interesante y también tiene algunas notas a pie de página [2].
[1] Aquí está mi primera nota a pie de página.
[2] Otra nota a pie de página.
Hacer < a href=#tag> texto < /a>
y luego en la nota a pie de página:< un nombre="etiqueta"> texto < /a>
Todo sin espacios.Referencia: http://www.w3schools.com/HTML/html_links.asp
<a name="1">Nota al pie</a>
bla bla
<a href="#1">ir</a> a la nota al pie.
