用A标签实现页面内容定位 点击链接跳到具体位置

简介:   经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了。实例参考微信营销理论手册的目录。   首先用A标签定义目录的链接。

  经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了。实例参考微信营销理论手册的目录。

  首先用A标签定义目录的链接。

<a href="#hudong">互动</a>

   然后在具体位置调用A标签,本例位置在“※ 微信营销之互动 ※”

<a name="hudong"></a>

   保存,刷新,测试一下,点击目录链接是不是可以跳到那个位置了?用A标签实现页面内容定位,点击链接就能跳到具体位置,简单吧?

  w3school对【HTML 链接 - name 属性】的定义

name 属性规定锚(anchor)的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示,它对读者是不可见的。

当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

A标签定位shoulu

目录
相关文章
不使用a标签,实现点击跳转到其他页面的代码
不使用a标签,实现点击跳转到其他页面的代码
|
4月前
|
JavaScript 前端开发
定义一个超链接,点击超链接后,执行一段代码,页面不跳转
这篇文章展示了如何在HTML中创建一个超链接,当点击这个超链接时,会执行JavaScript代码(例如弹出一个警告框)而不会导致页面跳转。
|
5月前
动态黑窗口打印文字404页面源码
动态黑窗口打印文字404页面源码
31 2
|
7月前
|
小程序
微信小程序实现不同按钮跳转同一个页面显示不同内容
微信小程序实现不同按钮跳转同一个页面显示不同内容
150 0
|
5月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
234 0
文本-----优化地方----添加搜索框,快捷链接,跳转页面要放置页数跳转框
文本-----优化地方----添加搜索框,快捷链接,跳转页面要放置页数跳转框
若依颜色失效怎么办?F12刷新样式不管用,回到控制台,重新点击项目链接就好了
若依颜色失效怎么办?F12刷新样式不管用,回到控制台,重新点击项目链接就好了
|
7月前
publiccms中将推荐页的内容显示在页面片段中
publiccms中将推荐页的内容显示在页面片段中
|
7月前
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
markdown增加目录索引,实现点击目录跳转到对应的内容目录标题
375 0
|
测试技术 API
软件测试面试题:在一个页面上,点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面。
软件测试面试题:在一个页面上,点击一个链接之后不会在当前页面上打开此链接而是新开一个窗口打开此页面。
145 0