两个iframe之间实现锚点功能

最新推荐文章于 2022-10-03 20:54:50 发布

ltx06

最新推荐文章于 2022-10-03 20:54:50 发布

阅读量799

点赞数

分类专栏： web开发文章标签： html html5 锚点跳转

web开发专栏收录该内容

186 篇文章 0 订阅

订阅专栏

1、当一个页面之间实现锚点功能时候可以通过如下方式实现：

[html]view plaincopy 
   
print?
 <p><a name="A1"></a>　　1、《热爱生命》</p>  

[html]view plaincopy 
   
print?
 <pre name="code" class="html"><a href="#A1">1、《热爱生命》</a><br/>  

2、两个页面之间实现锚点功能，可以通过如下方式实现

<a name="A1"></a>　　1、《热爱生命》

3、两个iframe之间实现锚点功能，如果用2所采用的方式则会发生如下情况：

从图片可以看出，当点击导航上的1.《热爱生命》确实跳转到了相应的锚点，不过是把导航条所在的这个iframe的页面c.html跳转到诗词所在的页面b.html。即把右侧iframe从c.html变成了b.html。而实际上我们期待的结果是右侧的导航条也就是c.html依然在，是把左侧诗词页面即b.htm跳转到相应的锚点的位置。即如下效果：

该功能只需在对左侧的iframe添加个name="left"，然后再右侧的导航条超链接<a href="b.html#A4">1、《热爱生命》</a> 添加个属性target="left"即<a href="b.html#A4" target="left">4、《倘若才华得不到承认》</a> 便可实现。

下面我把所需的代码给大家贴出来：

a.html

[html]view plaincopy 
   
print?
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>主页面</title>  
 <style type="text/css">  
     #page2{  
         width: 150px;  
         height: auto;  
         position: fixed;  
         right: 10px;  
         top: 30%;  
     }  
 </style>  
 </head>  
 <body>  
     <div id="page1">  
         <iframe name="left" src="b.html" height="1024px;" width="900px;"></iframe>  
           
     </div>  
     <div id="page2">  
         <iframe src="c.html"></iframe>  
     </div>  
   
 </body>  
 </html>  

b.html

[html]view plaincopy 
   
print?
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>内容页</title>  
 <style type="text/css">  
     #nav{  
         width: 150px;  
         height: auto;  
         position: fixed;  
         right: 10px;  
         top: 20px;  
     }  
 </style>  
 </head>  
 <body>  
     <p>汪国真诗集</p>  
 <p><a name="A1"></a>　　1、《热爱生命》</p>  
 <p>　　我不去想是否能够成功</p>  
 <p>　　既然选择了远方</p>  
 <p>　　便只顾风雨兼程</p>  
 <p>　　我不去想能否赢得爱情</p>  
 <p>　　既然钟情于玫瑰</p>  
 <p>　　就勇敢地吐露真诚</p>  
 <p>　　我不去想身后会不会袭来寒风冷雨</p>  
 <p>　　既然目标是地平线</p>  
 <p>　　留给世界的只能是背影</p>  
 <p>　　我不去想未来是平坦还是泥泞</p>  
 <p>　　只要热爱生命</p>  
 <p>　　一切，都在意料之中</p>  
 <p><a name="A2"></a>　　2、《如果生活不够慷慨》</p>  
 <p>　　如果生活不够慷慨</p>  
 <p>　　我们也不必回报吝啬</p>  
 <p>　　何必要细细的盘算</p>  
 <p>　　付出和得到的必须一般多</p>  
 <p>　　如果能够大方</p>  
 <p>　　何必显得猥琐</p>  
 <p>　　如果能够潇洒</p>  
 <p>　　何必选择寂寞</p>  
 <p>　　获得是一种满足</p>  
 <p>　　给予是一种快乐</p>  
 <p><a id="A3" name="A3"></a>　　3、《我微笑着走向生活》</p>  
 <p>　　我微笑着走向生活，</p>  
 <p>　　无论生活以什么方式回敬我。</p>  
 <p>　　报我以平坦吗？</p>  
 <p>　　我是一条欢乐奔流的小河。</p>  
 <p>　　报我以崎岖吗？</p>  
 <p>　　我是一座大山庄严地思索！</p>  
 <p>　　报我以幸福吗？</p>  
 <p>　　我是一只凌空飞翔的燕子。</p>  
 <p>　　报我以不幸吗？</p>  
 <p>　　我是一根劲竹经得起千击万磨！</p>  
 <p>　　生活里不能没有笑声，</p>  
 <p>　　没有笑声的世界该是多么寂寞。</p>  
 <p>　　什么也改变不了我对生活的热爱，</p>  
 <p>　　我微笑着走向火热的生活！</p>  
 <p><a name="A4"></a>　　4、《倘若才华得不到承认》</p>  
 <p>　　倘若才华得不到承认</p>  
 <p>　　与其诅咒　不如坚忍</p>  
 <p>　　在坚忍中积蓄力量</p>  
 <p>　　默默耕耘</p>  
 <p>　　诅咒　无济于事</p>  
 <p>　　只能让原来的光芒黯淡</p>  
 <p>　　在变得黯淡的光芒中</p>  
 <p>　　沦丧的更有　大树的精神</p>  
 <p>　　飘来的是云</p>  
 <p>　　飘去的也是云</p>  
 <p>　　既然今天</p>  
 <p>　　没人识得星星一颗</p>  
 <p>　　那么明日</p>  
 <p>　　何妨做皓月一轮</p>  
 <p>　　5、《假如你不够快乐》</p>  
 <p>　　假如你不够快乐</p>  
 <p>　　也不要把眉头深锁</p>  
 <p>　　人生本来短暂</p>  
 <p>　　为什么　还要栽培苦涩</p>  
 <p>　　打开尘封的门窗</p>  
 <p>　　让阳光雨露洒遍每个角落</p>  
 <p>　　走向生命的原野</p>  
 <p>　　让风儿熨平前额</p>  
 <p>　　博大可以稀释忧愁</p>  
 <p>　　深色能够覆盖浅色</p>  
 <p>　　6、《跨越自己》</p>  
 <p>　　我们可以欺瞒别人</p>  
 <p>　　却无法欺瞒自己</p>  
 <p>　　当我们走向枝繁叶茂的五月</p>  
 <p>　　青春就不再是一个谜</p>  
 <p>　　向上的路</p>  
 <p>　　总是坎坷又崎岖</p>  
 <p>　　要永远保持最初的浪漫</p>  
 <p>　　真是不容易</p>  
 <p>　　有人悲哀</p>  
 <p>　　有人欣喜</p>  
 <p>　　当我们跨越了一座高山</p>  
 <p>　　也就跨越了一个真实的自己</p>  
 <p>　　7、《挡不住的青春》</p>  
 <p>　　曾经有过那么多的惆怅，</p>  
 <p>　　想起往往令人断肠，</p>  
 <p>　　我不知道我的追求在何方，</p>  
 <p>　　问风问雨问大地，</p>  
 <p>　　却没有点回想。</p>  
 <p>　　岁月无声的流淌，</p>  
 <p>　　可是有谁愿意总是迷惘？</p>  
 <p>　　我要飞翔，</p>  
 <p>　　那么有没有人为我鼓掌？</p>  
 <p>　　我用生命和热血铺路，</p>  
 <p>　　没有一个季节能把青春阻挡！</p>  
   
   
 </body>  
 </html>  

c.html

[html]view plaincopy 
   
print?
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
 <title>导航页</title>  
 </head>  
 <body>  
     <a href="b.html#A1">1、《热爱生命》</a><br/>  
     <a href="b.html#A2" target="left">2、《如果生活不够慷慨》</a><br/>  
     <a href="b.html#A3" target="left">3、《我微笑着走向生活》</a><br/>  
     <a href="b.html#A4" target="left">4、《倘若才华得不到承认》</a><br/>  
 </body>  
 </html>  

转自：http://blog.csdn.net/stormkai/article/details/42983999

ltx06

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
两个iframe之间实现锚点功能

1、当一个页面之间实现锚点功能时候可以通过如下方式实现：[html] view plain copy print?p>a name="A1">a>　　1、《热爱生命》p> [html] view plain copy print?pre name="code" class="html">a hre
复制链接

扫一扫