用A标签实现页面内容定位 点击链接跳到具体位置
经常在维基百科等网站看到目录列表,点击链接会跳到具体的位置,小美眉一直在问是怎么做到的,其实挺简单的,用A标签实现页面内容定位就行了。实例参考微信营销理论手册的目录。
首先用A标签定义目录的链接。
<a href="#hudong">互动</a>
然后在具体位置调用A标签,本例位置在“※ 微信营销之互动 ※”
<a name="hudong"></a>
保存,刷新,测试一下,点击目录链接是不是可以跳到那个位置了?用A标签实现页面内容定位,点击链接就能跳到具体位置,简单吧?
w3school对【HTML 链接 - name 属性】的定义
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

用A标签实现页面内容定位 点击链接跳到具体位置的更多相关文章
- 让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成
让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边 点击链接后不跳转可以设置成 1.<a href="javascri ...
- 阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
问题:ios封装完之后,点击里边的按钮会跳转到网页上 ——小卡遇到这个问题就是这样解决的↓↓↓ 解决方法:建议将代码放到</head>标签前,当然,另外存为一个js 文件引用也是可以的呦~ ...
- marquee标签实现页面内容的滚动效果
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- html页面,左边点击链接,右边显示内容参考代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- Asp.Net正则获取页面a标签里的内容
Asp.Net正则获取页面a标签里的内容 string url = "http://www.114369.com"; string html = MyCLib.NetClass.S ...
- java selenium webdriver实战 页面元素定位
自动化测试实施过程中,测试程序中常用的页面操作有三个步骤 1.定位网页上的页面元素,并存储到一个变量中 2.对变量中存储的页面元素进行操作,单击,下拉或者输入文字等 3.设定页面元素的操作值,比如,选 ...
- JQuery 根据ID在页面中定位
1.锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还 ...
- UI自动化测试(三)对页面中定位到的元素对象做相应操作
前两天分别讲述了UI自动化测试基础以及对页面元素该如何进行定位,这一篇自然就是对定位到的页面元素对象进行相应操作啦. 阅读目录 1.常用操作元素对象的方法 2.鼠标事件操作 3.键盘事件操作 4.We ...
- java selenium webdriver第二讲 页面元素定位
自动化测试实施过程中,测试程序中常用的页面操作有三个步骤 1.定位网页上的页面元素,并存储到一个变量中 2.对变量中存储的页面元素进行操作,单击,下拉或者输入文字等 3.设定页面元素的操作值,比如,选 ...
随机推荐
- 从vboot来看:virtualbox 和 vmware 虚拟化软件环境的兼容性(支持能力)的差距真是挺大的!
仅仅就支持vboot启动来说:vwmare 完胜!! 熬了一周,(当前最新版本)用virtualbox 5.22 和 6.0 总是无法完成vboot的正常启动功能:不是蓝屏.就是死慢.要不就直接han ...
- Nginx-配置一个简单的http虚拟服务
配置文件内容如下: #user nobody; worker_processes 4; #工作进程的个数,可以配置多个,一般配置成CPU的核数 pid logs/nginx.pid; # 此文件用于记 ...
- C#日志记录设计与实现(BenXHLog)
C#日志记录设计与实现 日志记录: 日志记录在程序设计开发过程中,是非常重要的,可以供调试和记录数据,虽然说有开源的强大日志管理系统,比如apache的Log4Net,功能可谓强悍,但是有时候,不需要 ...
- nginx 动静分离(相同URL)
#报表 location ~* /(report)/ { if ($request_uri !~* .*(jd|taobao|operator).* ){ proxy_pass http://tweb ...
- thinkphp5---使用自定义助手函数
在进行项目开发的时候,系统自带的助手函数往往满足不了自己的需求,就需要通过自定义助手函数来实现某个功能,具体做法: 新建:myhelper.php 写入: <?php if (!function ...
- yii2优化 - 开启 Schema 缓存
开启 Schema 缓存 Schema 缓存是一个特殊的缓存功能,每当你使用活动记录时应该要开启这个缓存功能.如你所知, 活动记录能智能检测数据库对象的集合(例如列名.列类型.约束)而不需要手动地描述 ...
- 终于知道什么情况下需要实现.NET Core中的IOptions接口
自从接触 IOptions 之后,一直纠结这样的问题:自己定义的 Options 要不要实现 IOptions 接口. 微软有的项目中实现了,比如 Caching 中的 MemoryCacheOpti ...
- 1.7Oob 方法体中的循环也能也能返回值给方法
public String monthString(int monthNumber){ switch(monthNumber){ case 1: return "january"; ...
- 模板倍增LCA 求树上两点距离 hdu2586
http://acm.hdu.edu.cn/showproblem.php?pid=2586 课上给的ppt里的模板是错的,wa了一下午orz.最近总是被坑啊... 题解:树上两点距离转化为到根的距离 ...
- PHP之字符串类型
PHP之存取和修改字符串中的字符 PHP中的字符串,在存储的时候是按照字节存储的.利用一个字节数组存储字符串. PHP一个字符串string就是由一系列的字符组成,其中每个字符等同于一个字节. str ...