你如何链接(与<a>),使浏览器去到目标页面上的特定子标题,而不是顶部?
如果有任何带有id的标签(例如,<div id="foo">),那么你可以简单地将#foo附加到URL。否则,您不能任意链接到页面的各个部分。
下面是一个完整的例子:<a href="http://example.com/page.html#foo">跳转到page.html上的#foo </a> .html
<a href="#foo">跳转到同一页面上的#foo </a>
它被称为URI片段。
你有两个选择:
你可以在你的文档中放置一个锚,如下所示:
<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>
以下是如何做到的:
<a href="#go_middle">Go Middle</a>
<div id="go_middle">Hello There</div>
使用锚和散列。例如:
链接目标:
<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>
只需将一个带有元素ID的散列附加到URL。如。
<div id="about"></div>
and
http://mysite.com/#about
所以链接看起来是这样的:
<a href="http://mysite.com/#about">About</a>
或者只是
<a href="#about">About</a>
2020年3月12日,WICG为文本片段添加了一个草案,现在你可以链接到页面上的文本,就像你在搜索它一样,将以下内容添加到散列中
#:~:text=<链接到>的文本
Chrome Version 81.0.4044.138运行示例:
点击此链接应重新加载页面并突出显示链接的文本
前提是网页上的任何元素都有id属性。 可以简单地链接/跳转到标记引用的元素。
在同一页内:
<div id="markOne"> ..... </div>
......
<a href="#markOne">Jump to markOne</a>
其他页面:
<div id="http://randomwebsite.com/mypage.html#markOne">
Jumps to the markOne element in the mypage of the linked website
</div>
目标不一定有锚元素。
你可以去看看这把小提琴。
推荐文章
- 找到jQuery中所有未选中的复选框
- CSS /JS防止拖鬼图像?
- 我如何能得到一个元素的ID值与JavaScript?
- 禁用表单自动提交按钮单击
- 链接重新加载当前页面
- 我如何使一个HTML文本框显示空时提示?
- 如何使HTML文本不可选
- 没有定义Electron require()
- JavaScript表单提交-确认或取消提交对话框
- HTML5中的画布宽度和高度
- 如何使用JSF 2.0 Facelets在XHTML中包含另一个XHTML ?
- Ng-app和data-ng-app有什么区别?
- 内容=“X-UA-Compatible IE = 9;IE = 8;IE = 7;IE =边缘”
- 停止/关闭由navigator.mediaDevices.getUserMedia打开的网络摄像头流
- 我如何禁用使用CSS的表单字段?