a标签href实现页面内容点击定位

最新推荐文章于 2023-12-19 09:10:04 发布

原创最新推荐文章于 2023-12-19 09:10:04 发布 · 6.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html->基础

js/jsp/css/html 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用HTML中的<a>标签实现页面内的快速跳转导航。通过设置和引用ID属性，可以方便地从目录索引跳转到具体内容部分。

一，应用场景

点击页面目录标题，实现在本页面锚链接相应内容。

二，实现原理

<a>标签href属性，根据元素id，定位元素位置。

<div class="headList">
     <h3>目录索引</h3>
     <ul class="index">
            <li><a href="#1">接口文档1</a></li>
            <li><a href="#2">接口文档2</a></li>
            <li><a href="#3">接口文档3</a></li>
            <li><a href="#4">接口文档4</a></li>
     </ul>
</div>
<div class="content">
      <li id="1" class="content_li"><span>接口文档1详情</span></li>
      <li id="2" class="content_li"><span>接口文档2详情</span></li>
      <li id="3" class="content_li"><span>接口文档3详情</span></li>
      <li id="4" class="content_li"><span>接口文档4详情</span></li>
</div>