Come posso creare un collegamento a una nota a piè di pagina in HTML?
https://stackoverflow.com/questions/66964
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Per esempio:
Questo è il corpo principale dei miei contenuti.Ho un collegamento a piè di pagina per questa riga [1].Quindi, ho un po 'più di contenuti.Alcuni di questi sono interessanti e ha anche alcune note a piè di pagina [2].
[1] Ecco la mia prima nota a piè di pagina.
[2] Altra nota.
Quindi, se clicco sul collegamento "[1]", la pagina web viene indirizzata al primo riferimento alla nota a piè di pagina e così via.Come posso realizzare esattamente questo in HTML?
Soluzione
Assegna un ID a un contenitore, quindi utilizza # per riferirsi a quell'Id.
per esempio.
<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>Altri suggerimenti
È buona norma fornire un collegamento dalla nota a piè di pagina al punto in cui viene fatto riferimento (supponendo che esista una relazione 1:1).Ciò è utile perché il pulsante Indietro riporterà l'utente alla posizione di scorrimento in cui si trovava in precedenza, lasciando che il lettore trovi la sua posizione nel testo.Facendo clic su un collegamento al punto in cui si fa riferimento alla nota a piè di pagina nel testo, il testo viene posizionato nella parte superiore della finestra, rendendo molto semplice per il lettore riprendere da dove si era interrotto .
Quirksmode ha una pagina su note a piè di pagina sul web (anche se suggerisce di usare note a margine invece delle note a piè di pagina penso che le note a piè di pagina siano di più accessibile, con un collegamento alla nota a piè di pagina e la nota a piè di pagina seguita da un collegamento al testo, sospetto che sarebbe più facile seguirli con un lettore di schermo).
Uno dei collegamenti dalla pagina quirksmode suggerisce di avere una freccia, ↩, dopo il testo della nota a piè di pagina che rimanda, e di utilizzare l'entità ↩per questo.
per esempio.:
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>
Tuttavia, non sono sicuro di come gli screen reader gestirebbero l'entità.Collegato ai commenti del post di Grubber è Il post di Bob Eastern sull'accessibilità delle note a piè di pagina il che suggerisce che non sia stato letto, anche se è successo diversi anni fa e spero che gli screen reader siano migliorati ormai.Per l'accessibilità potrebbe valere la pena utilizzare un'ancora di testo come "torna al testo" o magari inserirla nell'attributo titolo del collegamento.Potrebbe anche valere la pena inserirne uno nella nota a piè di pagina originale, anche se non so come gli screen reader lo gestirebbero.
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>
(Sto solo facendo ipotesi sui problemi di accessibilità qui, ma poiché non è stato sollevato in nessuno degli articoli che ho menzionato, ho pensato che valesse la pena menzionarlo.Se qualcuno può parlare con più autorità sulla questione, sarei interessato a sentire.)
Per prima cosa entri e metti un tag di ancoraggio con un attributo nome davanti a ciascuna nota a piè di pagina.
<a name="footnote1">Footnote 1</a>
<div>blah blah about stuff</div>
Questo tag di ancoraggio non sarà un collegamento.Sarà semplicemente una sezione denominata della pagina.Quindi rendi l'indicatore della nota a piè di pagina un tag che fa riferimento a quella sezione denominata.Per fare riferimento a una sezione denominata di una pagina si utilizza il segno #.
<p>So you can see that the candidate lied
<a href="#footnote1">[1]</a>
in his opening address</p>
Se desideri collegarti a quella sezione da un'altra pagina, puoi farlo anche tu.Basta collegare la pagina e aggiungervi il nome della sezione.
<p>For more on that, see
<a href="mypaper.html#footnote1">footnote 1 from my paper</a>
, and you will be amazed.</p>
Dovrai impostare i tag di ancoraggio per tutte le tue note a piè di pagina.Prefissandoli con qualcosa del genere dovrebbe farlo:
< a name="FOOTNOTE-1">[ 1 ]< /a>
Quindi, nel corpo della pagina, collega la nota a piè di pagina in questo modo:
< a href="#FOOTNOTE-1">[ 1 ]< /a>
(notare l'uso di nome contro il href attributi)
In sostanza, ogni volta che imposti un nome per un tag A, puoi accedervi collegandoti a #NAME-USED-IN-TAG.
http://www.w3schools.com/HTML/html_links.asp ha più informazioni.
Nel tuo caso, probabilmente è meglio farlo con i tag a-href e a-name rispettivamente nei collegamenti e nei piè di pagina.
Nel caso generale dello scorrimento verso un elemento DOM, c'è a plugin jQuery.Ma se le prestazioni sono un problema, suggerirei di farlo manualmente.Ciò comporta due passaggi:
- Trovare la posizione dell'elemento verso cui stai scorrendo.
- Scorrimento fino a quella posizione.
quirksmode fornisce una buona spiegazione del meccanismo alla base del primo.Ecco la mia soluzione preferita:
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}
Utilizza il casting da null a 0, che non è l'etichetta corretta in alcuni ambienti, ma mi piace :) La seconda parte utilizza window.scroll.Quindi il resto della soluzione è:
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}
Ecco!
La risposta di Peter Boughton è buona, ma potrebbe essere migliore se invece di dichiarare la nota a piè di pagina come "p" (paragrafo), la dichiarassi come "li" (elemento elenco) all'interno di un "ol" (elenco ordinato):
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>
In questo modo non è necessario scrivere il numero sopra e sotto...purché i riferimenti siano elencati nell'ordine corretto di seguito.
tag di ancoraggio utilizzando ancore con nome
Utilizza i segnalibri nei tag di ancoraggio...
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>
Questo è il corpo principale dei miei contenuti.Ho un collegamento a piè di pagina per questa riga [1].Quindi, ho altri contenuti.In parte è interessante e contiene anche alcune note a piè di pagina [2].
[1] Ecco la mia prima nota a piè di pagina.
[2] Altra nota.
Scrivi < a href=#tag> testo < /a>
e poi in nota:< a name="tag"> testo < /a>
Il tutto senza spazi.Riferimento: http://www.w3schools.com/HTML/html_links.asp
<a name="1">Nota a piè di pagina</a>
bla bla
<a href="#1">vai</a> alla nota a piè di pagina.
