31

例えば：

これは私のコンテンツの本体です。この行の脚注リンクがあります [1]。それから、もう少しコンテンツがあります。いくつかは興味深いもので、いくつかの脚注も含まれています [2]。

[1] これが最初の脚注です。

[2] 別の脚注。

したがって、「[1]」リンクをクリックすると、Web ページが最初の脚注参照などに誘導されます。HTMLでこれをどのように正確に達成できますか?

4

10 に答える 10

50

コンテナーに ID を与え、その ID#を参照するために使用します。

例えば

<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>

于 2008-09-15T21:08:32.337 に答える
19

脚注から参照されている場所へのリンクを提供することをお勧めします (1 対 1 の関係があると仮定します)。これは便利です。戻るボタンを押すと、ユーザーは以前のスクロール位置に戻り、読者はテキスト内で自分の場所を見つける必要があります。テキスト内で脚注が参照されていた場所に戻るリンクをクリックすると、そのテキストがウィンドウの上部に表示されるため、読者は中断したところから簡単に再開できます。

Quirksmodeには Web 上の脚注に関するページがあります(ただし、脚注の代わりに傍注を使用することをお勧めします)スクリーンリーダーでフォローする）。

quirksmode ページからのリンクの 1 つは、脚注のテキストの後ろに戻るリンクの後に矢印 ↩ を付け、エンティティ ↩ を使用することを提案しています。このため。

例えば：

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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote. <a href="#footnote-2-ref">&#8617;</a>
</p>

ただし、スクリーンリーダーがエンティティをどのように処理するかはわかりません。Grubber の投稿のコメントからリンクされているのは、脚注のアクセシビリティに関する Bob Eastern の投稿です。これは、それが読まれていないことを示唆していますが、それは何年も前のことであり、スクリーン リーダーが今までに改善されていることを願っています。アクセシビリティのために、「テキストに戻る」などのテキスト アンカーを使用するか、リンクのタイトル属性に配置することをお勧めします。スクリーンリーダーがそれをどのように処理するかはわかりませんが、元の脚注に1つ入れる価値があるかもしれません.

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">&#8617;</a> 
</p>
<p id="footnote-2">
   2. Another footnote.
      <a href="#footnote-2-ref" title="return to text">&#8617;</a>
</p>

(私はここでアクセシビリティの問題について推測しているだけですが、私が言及したどの記事でも取り上げられていなかったので、取り上げる価値があると思いました。誰かがこの問題についてより多くの権威をもって話すことができるなら、私は興味があります.聞く。）

于 2008-09-16T00:00:00.503 に答える
3

まず、各脚注の前に name 属性を持つアンカー タグを配置します。

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

このアンカー タグはリンクではありません。これは、ページの名前付きセクションになります。次に、脚注マーカーを、その名前付きセクションを参照するタグにします。ページの名前付きセクションを参照するには、# 記号を使用します。

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

別のページからそのセクションにリンクしたい場合は、それもできます。ページをリンクして、セクション名を貼り付けるだけです。

 <p>For more on that, see 
 <a href="mypaper.html#footnote1">footnote 1 from my paper</a>
 , and you will be amazed.</p>
于 2008-09-15T21:11:26.230 に答える
1

あなたの場合、リンクとフッターにそれぞれa-hrefタグとa-nameタグを使用してこれを行うのがおそらく最善です。

DOM要素にスクロールする一般的なケースには、jQueryプラグインがあります。ただし、パフォーマンスが問題になる場合は、手動で行うことをお勧めします。これには2つのステップが含まれます。

  1. スクロール先の要素の位置を検索します。
  2. その位置までスクロールします。

quirksmodeは、前者の背後にあるメカニズムの良い説明を提供します。これが私の好ましい解決策です：

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

nullから0へのキャストを使用します。これは、一部のサークルでは適切なエチケットではありませんが、私はそれが好きです:)2番目の部分はを使用しwindow.scrollます。したがって、残りのソリューションは次のとおりです。

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

出来上がり！

于 2008-09-16T03:18:03.120 に答える
1

すべての脚注にアンカー タグを設定する必要があります。
< a name="FOOTNOTE-1">[ 1 ]< /a> のような接頭辞を付けるとよいでしょう:

次に、ページの本文で、次のように脚注にリンクします:
< a href="#FOOTNOTE-1">[ 1 ]</a> ( nameとhref属性
の使用に注意してください)

基本的に、A タグの名前を設定すると、#NAME-USED-IN-TAG にリンクすることでアクセスできます。


http://www.w3schools.com/HTML/html_links.aspに詳細があります。

于 2008-09-15T21:14:23.460 に答える
1

Peter Boughton の回答は適切ですが、脚注を「p」(段落) として宣言する代わりに、「ol」(順序付きリスト) 内で「li」(リスト項目) として宣言した方がよい場合があります。

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>

このように、参考文献が下に正しい順序でリストされている限り、番号を上と下に書く必要はありません。

于 2016-07-10T20:12:27.080 に答える
0

名前付きアンカーを使用したアンカー タグ

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

于 2008-09-15T21:07:21.513 に答える
0

アンカー タグでブックマークを使用する...

    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>
于 2008-09-15T21:09:16.780 に答える
0

これは私のコンテンツの本体です。この行の脚注リンクがあります [1]。それから、もう少しコンテンツがあります。いくつかは興味深いもので、いくつかの脚注も含まれています [2]。

[1] これが最初の脚注です。

[2] 別の脚注。

< a href=#tag> テキスト </a> を行う

そして脚注: < a name="tag"> テキスト < /a>

すべてスペースなし。参照: http://www.w3schools.com/HTML/html_links.asp

于 2008-09-15T21:09:33.800 に答える
0

<a name="1">脚注</a>

ブラブラ

脚注に<a href="#1">行く</a>。

于 2008-09-15T21:09:52.987 に答える