it-swarm-pt.tech

Como crio um link para uma nota de rodapé em HTML?

Por exemplo:

Este é o corpo principal do meu conteúdo. Eu tenho um link de nota de rodapé para esta linha [1]. Então, eu tenho mais um pouco de conteúdo. Algumas são interessantes e também possuem algumas notas de rodapé [2].

[1] Aqui está minha primeira nota de rodapé.

[2] Outra nota de rodapé.

Portanto, se eu clicar no link "[1]", ele direcionará a página da Web para a primeira referência de nota de rodapé e assim por diante. Como exatamente eu faço isso em HTML?

29
Ray Vega

Dê um ID a um contêiner e use # para se referir a esse ID.

por exemplo.

<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

Primeiro, você entra e coloca uma marca de âncora com um atributo de nome na frente de cada nota de rodapé.

 <a name="footnote1">Footnote 1</a>
 <div>blah blah about stuff</div>

Essa tag de âncora não será um link. Será apenas uma seção nomeada da página. Em seguida, você transforma o marcador de nota de rodapé em uma marca que se refere à seção nomeada. Para se referir a uma seção nomeada de uma página, use o sinal #.

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

Se você deseja vincular a essa seção a partir de outra página, também pode fazê-lo. Basta vincular a página e colocar o nome da seção nela.

 <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

No seu caso, provavelmente é melhor fazer isso com tags a-href e tags de nome em seus links e rodapés, respectivamente.

No caso geral de rolagem para um elemento DOM, existe um plugin do jQuery . Mas se o desempenho é um problema, sugiro fazê-lo manualmente. Isso envolve duas etapas:

  1. Localizando a posição do elemento para o qual você está rolando.
  2. Rolando para essa posição.

quirksmode fornece uma boa explicação do mecanismo por trás do primeiro. Aqui está minha solução preferida:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Ele usa a conversão de nulo a 0, o que não é a etiqueta adequada em alguns círculos, mas eu gosto :) A segunda parte usa window.scroll. Portanto, o restante da solução é:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Voila!

1
Andrey Fedorov

A resposta de Peter Boughton é boa, mas poderia ser melhor se, em vez de declarar a nota de rodapé como "p" (parágrafo), você declarasse como "li" (item de lista) dentro de um "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>

Dessa forma, não é necessário escrever o número na parte superior e inferior ... desde que as referências estejam listadas na ordem correta abaixo.

1
Anders

Você precisará configurar tags de âncora para todas as suas notas de rodapé. Prefixando-os com algo como isto deve fazê-lo:
<a name = "FOOTNOTE-1"> [1] </ a>

Em seguida, no corpo da sua página, link para a nota de rodapé da seguinte forma:
<a href = "# FOOTNOTE-1">> [1] </ a>
(observe o uso do nome vs o href atributos)

Essencialmente, sempre que você definir um nome para uma tag A, poderá acessá-la vinculando a # NAME-USED-IN-TAG.


http://www.w3schools.com/HTML/html_links.asp possui mais informações.

1
Scott Swezey

tags de âncora usando âncoras nomeadas

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

0
Bloodhound

Use marcadores em tags de âncora ...

    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 é o corpo principal do meu conteúdo. Eu tenho um link de nota de rodapé para esta linha [1]. Então, eu tenho mais um pouco de conteúdo. Algumas delas são interessantes e também possuem algumas notas de rodapé [2].

[1] Aqui está minha primeira nota de rodapé.

[2] Outra nota de rodapé.


Faça <a href = # tag> texto </ a>

e depois na nota de rodapé: <a name = "tag"> texto </ a>

Tudo sem espaços. Referência: http://www.w3schools.com/HTML/html_links.asp

0
zxcv

<a name="1"> Nota de rodapé </a>

bla bla

<a href="#1"> vá </a> para a nota de rodapé.

0
Sklivvz