アンカー ポイントを使用して簡単なインデックス効果を作成する [CSSdemo]_html/css_WEB-ITnose

说 機能

【機能説明】 ボタンをクリックすると該当エリアへジャンプします

<div class="box" id="box">    //将详细信息框外边再套一层div,是为了限制展示区的高度，并避免出现滚动条    <div class="listWrap">        //详细信息框        <ul class="list">        </ul>            </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>

【CSS キーコード説明】

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

【効果表示】

【ソースコードビュー】