如何链接到页面的一部分?(哈希?)


210

您如何链接(与<a>),以便浏览器转到目标页面上与顶部相对的某些子标题?

Answers:


275

如果有<a name="foo">标签或带有标签的任何标签id(例如<div id="foo">),则只需将其附加#foo到URL。否则,您将无法任意链接到页面的某些部分。

这是一个完整的示例: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

在同一页面上链接内容的示例: <a href="#foo">Jump to #foo on same page</a>


60
只需注意:在HTML5中name<a>-elements不再具有-attribute :a元素上的name属性已过时。考虑将id属性放到最近的容器上。
2015年

那么您使用完整示例还是同一页面示例?完整的例子不是一回事吗?
akantoword

2
如果我们有一个网址宁静的页面,例如:domain.com/#home?page=1如何在href中使用ID?
iraj jelodari

1
@irajjelodari您需要在末尾添加哈希:domain.com/?page=1#home
标记

我不得不在URL中使用2个标签,例如:example.com/#RouteName?page=1#ID。一个用于路由,另一个用于导航当前页面。最后,我使用html5模式的URL来删除路由主题标签;)@tomsmeding
iraj jelodari 16/11/19

41

您使用锚点和哈希。例如:

链接目标:

 <a name="name_of_target">Content</a>

链接到目标:

 <a href="#name_of_target">Link Text</a>

或者,如果链接来自其他页面:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

8
Broser还将跳转到ID为的任何元素name_of_target。您无需将<a>标签用作目标。因此,另一个目标可能是<h3 id='name_of_target'>Content</h3>
Cyrille

8
请注意,这在HTML5中已过时。
蒂姆(Tim)

33

只需将带有元素ID的哈希附加到URL。例如

<div id="about"></div>

http://mysite.com/#about

因此链接看起来像:

<a href="http://mysite.com/#about">About</a>

要不就

<a href="#about">About</a>

21

方法如下:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

2
你什么?</a>开业后您将要关闭<div ...>-不确定要在这里做什么。
多米尼克·罗杰

1
我复制了我的链接行并粘贴到下面,却忘记了关闭div。不管怎么说,多谢拉。
Sarfraz 2010年

10

您有两种选择:

您可以按以下方式在文档中放置锚点:

<a name="ref"></a>

否则,您给任何HTML元素指定一个ID:

<h1 id="ref">Heading</h1>

然后只需将哈希值附加#ref到链接的URL即可跳转到所需的引用。例:

<a href="document.html#ref">Jump to ref in document.html</a>

6

2020年3月12日,WICG为“ 文本片段”添加了草稿,现在,您可以通过将以下内容添加到哈希表中来链接到页面上的文本,就像在搜索文本一样

#:~:text=<Text To Link to>

的工作示例Chrome Version 81.0.4044.138

单击此链接应重新加载页面并突出显示链接的文本

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.