利用锚点制作简单索引效果

来源：互联网发布：淘宝回收相机哪家可靠编辑：程序博客网时间：2024/06/16 20:34

【功能说明】

　　点击按钮时，页面跳转到对应区域

【HTML代码说明】

　　【1】【主体框架】

<div class="box" id="box">    /*最外边再套一层div，是为了隐藏滚动条*/    <div class="listWrapOut">         /*将详细信息框外边再套一层div,是为了限制展示区的高度*/        <div class="listWrap">            /*详细信息框*/            <ul class="list">                                        </ul>                </div>    </div>    /*控制框*/    <nav class="conList">        /*设置href为#a，意思是点击该标签页面将跳转到名称为a的锚点上*/        <a href="#a" class="con">A</a>        <a href="#b" class="con">B</a>        <a href="#c" class="con">C</a>        <a href="#d" class="con">D</a>        <a href="#e" class="con">E</a>    </nav></div>

　　【2】【详细信息列举】

//A信息，设置id为a,意思是将该锚点命名为a<li class="in" id="a">    //标题    <h2 class="in-tit">A</h2>    //内容    <div class="in-txt">A.1</div>    <div class="in-txt">A.2</div>    <div class="in-txt">A.3</div>    <div class="in-txt">A.4</div>    <div class="in-txt">A.5</div></li><li class="in" id="b">    <h2 class="in-tit">B</h2>    <div class="in-txt">B.1</div>    <div class="in-txt">B.2</div>    <div class="in-txt">B.3</div>    <div class="in-txt">B.4</div>    <div class="in-txt">B.5</div></li>

【CSS重点代码说明】

//设置宽度比子级宽度窄20px，及设置overflow:hidden达到隐藏滚动条并可以滚动的效果.listWrapOut{    width: 480px;    overflow: hidden;}//使显示出高度为280px,背景颜色为#ccc.listWrap{    overflow:auto;    height: 280px;    background-color: #ccc;        width: 500px;}//通过设置计算后的高度值，使详细信息框里的每个锚点将链接时，都可以正好到达信息框的顶部.list{    height: 1080px;}

【效果展示】

0 0