- 剑指JavaWeb:技术详解与应用实践
- 尚硅谷教育编著
- 434字
- 2024-07-24 13:17:44
2.3.5 锚点
所谓锚点是指在 URL 地址中出现的片段标识符,也称为页面内链接。如果所请求的目标是一个大目标,那么可以使用<a>链接来将页面划分成大目标的一个一个小目标,之后在地址栏中输入这个小目标的标识之后跳转到小目标的位置。
<a>标签的id属性可以在页面中划分一个一个小目标,其属性的值可以是自定义的字母、数字,但是尽量不要使用数字开头来创建test_anchors.html,示例代码如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_29_2.jpg?sign=1739298176-Vk53aqAEDhpOkWKqM4RJO0jN5wZNBxoV-0-2cd859f154f3ac6afd83c8a7d2bfb0e4)
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_30_1.jpg?sign=1739298176-nWdRrAVN1c30VVjXzVpbrnd5qN2x6aYz-0-36a941ed9502c800d1c90b58b151e0be)
在上面代码的基础上,直接在浏览器地址栏的地址后面加上“#test1”或“#test2”将跳转至其对应的页面标记的小目标位置。如图2-24所示,地址后面添加“#test2”的效果。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_30_2.jpg?sign=1739298176-x84JC2UhRKGwsvKCZi398rb5zCzzHjW2-0-4a317dec788a4c6199d3b9a5a0ca6a6c)
图2-24 地址后加“#test2”跳转至对应位置
以上做法虽然可以跳转到小目标位置,但是每次都需要在地址栏上输入,比较麻烦,因此可以定义跳转到这个小目标的超链接。示例代码如下,在上面代码的顶端加上<a>标签来进行测试。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_30_3.jpg?sign=1739298176-wcE7h56sLD8fA9XCLN1Y9VW3vLzgHqoA-0-b2c359570b981d9348f76ae3e11f7071)
上面代码中使用相对路径,只是写了“#test1”和“#test2”,那么路径将会解析为当前的文件地址。锚点也可以链接到其他目标的小目标,示例代码如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_30_4.jpg?sign=1739298176-MhKslhw4CkWFPU7tBWjXvfU5Pe9jftjw-0-6faa5cb2fb64b64b06967817d3b117c7)
上述代码中,单击任何一个链接将直接跳转到index.html的小目标位置。