用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.设定页面元素的操作值,比如,选 ...
随机推荐
- Java开发中Maven Jar包管理建议
Jar包管理规范 基于使用Git做版本控制,使用Jenkins做持续集成,以及Git-flow分支管理策略的情况: 带-SNAPSHOT为快照版本,例如1.0.0-SNAPSHOT 正式发布版本只有版 ...
- 巧妙解决windows下 copy命令不接受太长路径的问题
今天遇到了写的bat文件中执行xcopy成功,但是部分文件丢失的问题,查看日志,发现很多提示 : “the system can not find the path specified.“ 但是去指定 ...
- web java -- 连接池 -- 概述
1. 连接池的实现原理 1. 创建连接池 首先要创建一个静态的连接池.这里的“静态”是指池中的连接时在系统初始化时就分配好的,并且不能够随意关闭.Java 提供了很多容器类可用来构建连接池,例如Vec ...
- android 网络图片双缓存
本文转自:http://blog.csdn.net/a79412906/article/details/10180583 Android每次加载图片很浪费时间.所以设计了一个图片缓存技术来解决每次an ...
- js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。
背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...
- {Django基础八之cookie和session}一 会话跟踪 二 cookie 三 django中操作cookie 四 session 五 django中操作session
Django基础八之cookie和session 本节目录 一 会话跟踪 二 cookie 三 django中操作cookie 四 session 五 django中操作session 六 xxx 七 ...
- Navicat工具、pymysql模块 sql注入
cls超 Navicat工具.pymysql模块 阅读目录 一 IDE工具介绍 二 pymysql模块 一 IDE工具介绍(Navicat) 生产环境还是推荐使用mysql命令行,但为了方便我们测试, ...
- tensoflow模型中提示:ValueError: Variable rnn/basic_rnn_cell/kernel already exists, disallowed. Did you mean to set reuse=True or reuse=tf.AUTO_REUSE in VarScope? 解决办法
在利用tensorflow框架进行模型训练的时候,有时我们需要多次训练对结果求均值来得到一个均衡的评测结论.比如训练十次求平均值.但是tf的本质就是图,当变量第一次定义使用后,第二次再使用就是提示: ...
- Java高级工程师面试题总结及参考答案
一.面试题基础总结 1. JVM结构原理.GC工作机制详解 答:具体参照:JVM结构.GC工作机制详解 ,说到GC,记住两点:1.GC是负责回收所有无任何引用对象的内存空间. 注意:垃圾回收回 ...
- window.onresize监听事件
window.onresize监听事件 onresize 事件会在窗口或框架被调整大小时发生. 支持onresize的标签:<a>, <address>, <b>, ...