两个iframe之间实现锚点功能

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>

更多相关文章

随机推荐