解决不同页面间<a>标签的锚点功能实现

最新推荐文章于 2023-05-10 00:29:14 发布

原创最新推荐文章于 2023-05-10 00:29:14 发布 · 939 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#a标签锚点

个人学习历程专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了如何在复杂的多iframe页面结构中实现<a>标签锚点功能，通过正确设置a标签的目标路径和iframe的name属性，确保在不同iframe间的锚点跳转能够准确无误。

解决不同页面间（不同页面是iframe框起来的）<a>标签锚点功能的实现。
我的目录结构：
![目录结构](https://img-blog.csdnimg.cn/20190513175519717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1X2x1b2x1bw==,size_16,color_FFFFFF,t_70)
关键点：a标签要添加不同页面的路径，并且#xxx它的id值（锚点名称），target写上iframe各个小框架的各自名称![a标签内容](https://img-blog.csdnimg.cn/20190513175644952.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1X2x1b2x1bw==,size_16,color_FFFFFF,t_70)
body_1_1的id值（锚点位置）：
![具体锚点位置的id值](https://img-blog.csdnimg.cn/20190513180007522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1X2x1b2x1bw==,size_16,color_FFFFFF,t_70)
最后，iframe里面的关键点：
![iframe里面的name值](https://img-blog.csdnimg.cn/20190513180100965.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1l1X2x1b2x1bw==,size_16,color_FFFFFF,t_70)