it-swarm-ko.tech

HTML에서 각주에 대한 링크를 어떻게 만듭니 까?

예를 들면 :

이것은 내 콘텐츠의 본문입니다. 이 줄에 대한 각주 링크가 있습니다 [1]. 그럼 더 많은 내용이 있습니다. 그 중 일부는 흥미롭고 각주도 있습니다 [2].

[1] 첫 번째 각주입니다.

[2] 다른 각주.

따라서 "[1]"링크를 클릭하면 웹 페이지가 첫 번째 각주 참조 등으로 이동합니다. HTML에서 정확히 어떻게 수행합니까?

29
Ray Vega

컨테이너에 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>
46
Peter Boughton

먼저 들어가서 각 각주 앞에 이름 속성이있는 앵커 태그를 넣습니다.

 <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>
3
Adrian Dunston

귀하의 경우에는 링크와 바닥 글에 각각 a-href 태그와 a-name 태그를 사용하는 것이 가장 좋습니다.

DOM 요소로 스크롤하는 일반적인 경우에는 jQuery 플러그인 이 있습니다. 그러나 성능이 문제라면 수동으로 수행하는 것이 좋습니다. 여기에는 두 단계가 포함됩니다.

  1. 스크롤하려는 요소의 위치 찾기.
  2. 해당 위치로 스크롤합니다.

quirksmode 전자 뒤에있는 메커니즘에 대한 좋은 설명을 제공합니다. 내가 선호하는 솔루션은 다음과 같습니다.

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

그것은 null에서 0으로의 캐스팅을 사용하는데, 어떤 서클에서는 적절한 에티켓이 아니지만 나는 그것을 좋아합니다. :) 두 번째 부분은 window.scroll를 사용합니다. 따라서 나머지 솔루션은 다음과 같습니다.

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

짜잔!

1
Andrey Fedorov

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>

이렇게하면 참조가 아래에 올바른 순서로 나열되어있는 한 상단과 하단에 번호를 쓸 필요가 없습니다.

1
Anders

모든 각주에 앵커 태그를 설정해야합니다. 다음과 같이 접두사를 붙여야합니다.
<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 자세한 정보가 있습니다.

1
Scott Swezey

명명 된 앵커를 사용하는 앵커 태그

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

0
Bloodhound

앵커 태그에 북마크 사용 ...

    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

이것은 내 콘텐츠의 본문입니다. 이 줄에 대한 각주 링크가 있습니다 [1]. 그럼 더 많은 내용이 있습니다. 그 중 일부는 흥미롭고 각주도 있습니다 [2].

[1] 첫 번째 각주입니다.

[2] 다른 각주.


<a href = # tag> 텍스트 </ a> 수행

그리고 각주에서 : <a name = "tag"> 텍스트 </ a>

모두 공백이 없습니다. 참조 : http://www.w3schools.com/HTML/html_links.asp

0
zxcv

<a name="1"> 각주 </a>

bla bla

각주로 <a href="#1"> 이동 </a>합니다.

0
Sklivvz