链接到当前页面中的元素

Question

我创建了一个HTML页面,其中包含许多带有以下标题的表:Content,Main_Page,Document,Expenses等.

我想为页面顶部创建一个链接.当我点击该链接时,它应该转到特定部分.所以我使用下面的代码来映​​射内容.但这对我不起作用.

<a href="#Content">Content Section</a>

Answer 1

您需要为链接创建一个锚点.这样做的现代方法是为适当的元素赋予id="Content"属性.较旧的方法是使用<a name="Content"></a>.

Answer 2

将您想要"跳转"的元素提供给一个清晰的ID,如下所示:

<p id="idOfTag">Your content goes here</p>

然后在页面顶部的链接中,让它引用该元素的id(请注意#):

<a href="#idOfTag">Jump</a>

多个链接的完整示例:

<ul>
  <li><a href="#contentParagraph">Content</a></li>
  <li><a href="#mainPageParagraph">Main page</a></li>
  <li><a href="#documentParagraph">Document</a></li>
  <li><a href="#expensesParagraph">Expenses</a></li>
</ul>
<p id="contentParagraph">
  <h4>Content</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="mainPageParagraph">
  <h4>Main page</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="documentParagraph">
  <h4>Document</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p id="expensesParagraph">
  <h4>Expenses</h4>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Answer 3

您可以使用标记的name属性anchor来实现此目的.

假设你有一个dividcontent

<div id="content">This is my div</div>

下一步要确保你有一个anchor与标签name属性相同id的div content

<a href="#" name="content">Click to go to the top</a>

现场演示.

向下滚动以查看链接

另一种做法是

<div id="content">My div</div>

然后你的锚标记的href应该是#content

<a href="#content">Click to go to top</a>

现场演示.