在浏览一些网页的时候大都在网页的上方有一个固定住的导航条,上边会列出下方显示内容的版块分区。当点击导航条中的一个版块的时候他会自动的跳转到指定的版块,这是页面内部的区域跳转。上实例:
<!--为了简化代码方便阅读,div版块设置为宽度高度各为300px的不同颜色的版块-->
<p id="part1">第1章</p>
<div class="part"></div>
<p id="part2">第2章</p>
<div class="part"></div>
<p id="part3">第3章</p>
<div class="part"></div>
<p id="part4">第4章</p>
<div class="part"></div>
<p id="part5">第5章</p>
<div class="part"></div>
<p id="part6">第6章</p>
<div class="part"></div>
<!--设置的锚点链接设置行内样式将导航条定位到右上角-->
<div style="position: fixed;top:20px;right: 20px">
<a href="#part1">第1章</a>
<a href="#part2">第2章</a>
<a href="#part3">第3章</a>
<a href="#part4">第4章</a>
<a href="#part5">第5章</a>
<a href="#part6">第6章</a>
</div>
分析: 此时点击 导航条的各个区域就会跳转到页面指定的区域。
使用锚点链接的几个重点是:
1:在链接的目的区域设置id属性,并设置上唯一的一个id名称。
2:在导航条区域设置a标签,注意href属性的属性值是要链接区域的id值,并且一定要记住带“#”号。