如何链接到页面的某个部分?(hash?)

11 浏览
0 Comments

如何链接到页面的某个部分?(hash?)

如何使用标签链接,使得浏览器跳转到目标页面的特定子标题而不是页面顶部?

0
0 Comments

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

2020年3月12日,WICG(Web Platform Incubator Community Group)添加了一个草案,其中介绍了文本片段(Text Fragments),现在您可以通过在哈希中添加以下内容来链接到页面上的文本,就像您正在搜索它一样:

#:~:text=<要链接到的文本>

在Chrome版本81.0.4044.138上的工作示例:

[点击此链接](https://stackoverflow.com/questions/2835140#:~:text=Click%20on%20this%20link)应该重新加载页面并突出显示链接的文本。

我刚刚在Firefox中尝试了这个功能,它可以突出显示文本,除非文本位于我的


标签中,但它不会像在Chrome中或作为锚点那样滚动到页面上的文本。此外,即使在页面上滚动到不同位置后重新加载URL也似乎没有任何作用,但是离开页面并返回带有该参数的URL再次生效(在Chrome中)。我希望这更加一致...是否有关于此逻辑和相关内容的链接?

这是一个基于Chromium的功能。我在这个网站上找到了更多相关信息:[mgearon.com/html/text-fragments](https://mgearon.com/html/text-fragments)

请查看[Can I Use](https://caniuse.com/?search=text%20fragments)以了解当前浏览器支持的情况。

0
0 Comments

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

在HTML中,您可以使用锚点和哈希来实现。例如:

链接的目标:

<a name="name_of_target">内容</a>

链接到目标:

<a href="#name_of_target">链接文本</a>

或者,如果链接来自不同的页面:

<a href="http://path/to/page/#name_of_target">链接文本</a>

浏览器还会跳转到具有id为name_of_target的任何元素。您不必使用<a>标签作为目标。因此,另一个目标可以是<h3 id='name_of_target'>内容</h3>

需要注意的是,在HTML5中,这种方法已经过时了。

为了澄清Tim的评论,片段链接和空的"a"标签在HTML5中仍然有效。使用"name"标签已被弃用,取而代之的是"id"标签。 html.spec.whatwg.org/multipage/browsing-the-web.html#navigate

0
0 Comments

问题出现的原因是用户想要在页面中链接到特定部分,但不清楚如何实现。解决方法是使用URI片段来链接到页面的特定部分。

如果页面中有任何一个带有id属性的标签(例如

),那么可以简单地将#foo添加到URL的末尾。否则,无法任意链接到页面的部分。

以下是一个完整的示例:跳转到page.html上的#foo

链接到同一页内容的示例:跳转到同一页的#foo

这被称为URI片段。

如果URL是类似于domain.com/#home?page=1的RESTful页面,可以将#home放在末尾:domain.com/?page=1#home。

如果需要在URL中使用两个井号,例如example.com/#RouteName?page=1#ID,一个用于路由,一个用于当前页面内的导航。最后,可以使用HTML5模式的URL来移除路由的井号。

如果要链接的#foo元素处于隐藏状态,是否有办法实现呢?

如果只使用一次的类是否可以实现此功能?

博客平台Medium.com似乎忽略了井号,但在井号前加上斜杠可以起作用。(n=1,但我没有理由认为对于同一平台上的其他帖子/博客会有所不同。)

在React中如何应用这个方法?

0