1、当一个页面之间实现锚点功能时候可以通过如下方式实现:
<p><a name="A1"></a> 1、《热爱生命》</p>
<pre name="code" class="html"><a href="#A1">1、《热爱生命》</a><br/>
2、两个页面之间实现锚点功能,可以通过如下方式实现
<p><a name="A1"></a> 1、《热爱生命》</p>
<a href="b.html#A1">1、《热爱生命》</a><br/>
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><br/>添加个属性target="left"即<a href="b.html#A4" target="left">4、《倘若才华得不到承认》</a><br/>便可实现。
下面我把所需的代码给大家贴出来:
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>