it-swarm-es.com

¿Cómo creo un enlace a una nota al pie en HTML?

Por ejemplo:

Este es el cuerpo principal de mi contenido. Tengo un enlace de nota al pie de esta línea [1]. Entonces, tengo más contenido. Parte de esto es interesante y también tiene algunas notas al pie [2].

[1] Aquí está mi primera nota al pie.

[2] Otra nota a pie de página.

Por lo tanto, si hago clic en el enlace "[1]", dirige la página web a la primera referencia de la nota al pie y así sucesivamente. ¿Cómo puedo lograr esto exactamente en HTML?

29
Ray Vega

Dele una identificación a un contenedor, luego use # 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>
46
Peter Boughton

Primero entras y pones una etiqueta de ancla 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. Solo será una sección con nombre de la página. Luego, convierte el marcador de nota al pie en una etiqueta que se refiere a esa sección con nombre. Para referirse a una sección con nombre de una página, use el signo #.

 <p>So you can see that the candidate lied 
 <a href="#footnote1">[1]</a> 
 in his opening address</p>

Si desea vincular a esa sección desde otra página, también puede hacerlo. Simplemente vincule la página y agregue el nombre de la sección en ella.

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>
3
Adrian Dunston

Para su caso, probablemente sea mejor que haga esto con las etiquetas a-href y a-name en sus enlaces y pies de página, respectivamente.

En el caso general de desplazarse a un elemento DOM, hay un complemento jQuery . Pero si el rendimiento es un problema, sugeriría hacerlo manualmente. Esto implica dos pasos:

  1. Encontrar la posición del elemento al que se desplaza.
  2. Desplazarse a esa posición.

quirksmode 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 la conversión de nulo a 0, que 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));
}

Voila!

1
Andrey Fedorov

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), declaraste 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 en la parte superior e inferior ... siempre que las referencias se enumeren en el orden correcto a continuación.

1
Anders

Deberá configurar etiquetas de anclaje para todas sus notas al pie. Prefijarlos con algo como esto debería hacerlo:
<a name = "FOOTNOTE-1"> [1] </ a>

Luego, en el cuerpo de su página, enlace a la nota al pie de esta manera:
<a href = "# FOOTNOTE-1"> [1] </ a>
(tenga en cuenta el uso del nombre vs el href atributos)

Esencialmente, cada vez que establezca el nombre de una etiqueta A, puede acceder a ella al vincularla a # NAME-USED-IN-TAG.


http://www.w3schools.com/HTML/html_links.asp tiene más información.

1
Scott Swezey

etiquetas de anclaje usando anclas con nombre

http://www.w3schools.com/HTML/html_links.asp

0
Bloodhound

Usar marcadores en las 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>
0
Paul Dixon

Este es el cuerpo principal de mi contenido. Tengo un enlace de nota al pie de esta línea [1]. Entonces, tengo más contenido. Parte de esto es interesante y también tiene algunas notas al pie [2].

[1] Aquí está mi primera nota al pie.

[2] Otra nota a pie de página.


Hacer <a href = # tag> texto </ a>

y luego en la nota al pie: <a name = "tag"> text </ a>

Todo sin espacios. Referencia: http://www.w3schools.com/HTML/html_links.asp

0
zxcv

<a name="1"> Nota al pie </a>

bla bla

<a href="#1"> vaya </a> a la nota al pie.

0
Sklivvz