两个iframe之间实现锚点功能

来源：互联网发布：不用网络和流量的游戏编辑：程序博客网时间：2024/05/21 12:39

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

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

<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

<!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

<!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

<!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>

0 0