跳到主要内容

HTML

2023年04月12日
柏拉文
越努力，越幸运

一、认识​

给a标签的文本添加锚点，单击链接可跳到name为a01的a标签处,使用name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用。　

二、实现​

<div class="tab">
    <div class="tab-scroll-container">
    <a class="tab-item" href="#a">a</a>
    <a class="tab-item" href="#b">b</a>
    <a class="tab-item" href="#c">c</a>
    <a class="tab-item" href="#d">d</a>
    <a class="tab-item" href="#e">e</a>
    <a class="tab-item" href="#f">f</a>
    <a class="tab-item" href="#g">g</a>
    <a class="tab-item" href="#h">h</a>
    </div>
</div>
<div class="content">
    <div class="content-scroll-container">
    <a name="a" class="a">a内容</a>
    <a name="b" class="b">b内容</a>
    <a name="c" class="c">c内容</a>
    <a name="d" class="d">d内容</a>
    <a name="e" class="e">e内容</a>
    <a name="f" class="f">f内容</a>
    <a name="g" class="g">g内容</a>
    <a name="h" class="h">h内容</a>
    </div>
</div>