添加锚点的三种方式

2023-11-08

1.通过链接跳转到指定id的位置:

	<body>
		<a href="#a">跳转到指定位置</a>
		<ul>
			<li>1</li>
			<li>1</li>
			<li id="a" style="color: red;">2</li>
			<li>1</li>
			<li>1</li>
		</ul>
	</body>

2.只有对a标签有效的方法,设置name属性:

(在chrome浏览器中,使用第二种方法跳转到目标位置时,会给目标添加上一个浅蓝色边框, 利于寻找)

	<body>
		<a href="#a">跳转到指定位置</a>
		<ul>
			<p>练习</p>
			<p>练习</p>
			<a name="a" href="#" style="text-decoration: none; color: red;">练习</a>
			<!--仅对a标签可以-->
			<p>练习</p>
			<p>练习</p>
			<p>练习</p>
		</ul>
	</body>

3.利用Element.scrolIIntoView()方法,Element.scrolIIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内;

	<body>
		<ul>
			<li class="" onclick="javascript:document.getElementById('here').scrollIntoView()">寻找红色的here</li>
			<li>herr</li>
			<li>herr</li>
			<li>herr</li>
			<li style="color: red;" id="here">herr</li>
			<li>herr</li>
		</ul>
	</body>

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

添加锚点的三种方式 的相关文章

  • 如何将内部 div 与外部 div 的底部对齐?

    我需要将内部 div 与外部 div 的底部对齐 我的代码如下所示 div class myOuterDiv div class div1 floatLeft Variable content here div div class div2
  • 使用 jquery UI 调整大小的分屏 div

    我心中有一个设计 涉及 html 中的拆分面板视图 类似于 winforms 拆分面板 我一直在尝试jQuery UI 可调整大小 http jqueryui com demos resizable我喜欢这个功能 我只是似乎无法协调两者的大
  • 如何将身份验证详细信息传递给 iframe 内的应用程序?

    我有一个网页 想在其中显示詹金斯的网页 因此使用iframe like But http xxx xxx xx xx 8080 view Nightly 20Builds 20 打开登录页面 因此无法直接显示内容 其实我想在没有登录的情况下
  • svg路径指针事件-点击检测

    我正在编写一些 HTML 以便可以使用 HTML SVG 和 PATH 标签绘制贝塞尔曲线 我的曲线效果非常好 现在我想添加一项功能 如果用户将鼠标悬停在曲线上 我会更改颜色 但实际情况是 SVG 创建了一个包含路径的大框 并捕获所有点击
  • 如何使用 Nokogiri 漂亮地打印 HTML?

    我用 Ruby 编写了一个网络爬虫 并且正在使用Nokogiri HTML来解析页面 我需要打印该页面 在 IRB 中闲逛时 我注意到一个pretty print方法 然而它需要一个参数 我不知道它想要什么 我的爬虫正在缓存网页的 HTML
  • 如何正确编码 mailto 链接?

    我正在生成一些 HTML 并且我想生成 XSS 和数据库内容安全的mailto关联 这里使用的正确编码是什么 这个怎么样 myLiteral Text string Format mailto 0 Content Type text htm
  • 电子邮件通讯未正确呈现

    我是 CSS 和 HTML 新手 我有一个包含 HTML 和 CSS 代码的电子邮件模板 我在新闻通讯模板的右上角放置了一个粉色圆圈框 http www pedersenshotell se newsletter http www pede
  • Div 上的倾斜边框

    我正在尝试倾斜一个 div 类似于 使用 css 倾斜 div 的顶部而不倾斜文本 https stackoverflow com questions 13591584 slant the top of a div using css wi
  • 隐藏选择中的第一个选项[重复]

    这个问题在这里已经有答案了 我在下拉列表中有动态生成的选项 我想隐藏第一个选项 因为不需要 有没有跨浏览器兼容的方法来实现这一点 无论使用 jquery 还是 css 任何解决方案都是好的 Ahmar my drop down select
  • React-dropzone 打开文件选择器两次

    我很长一段时间都遇到了 React Dropzone 的问题 首先 让我们直接通过视频来解决这个问题 https drive google com open id 1UmWtHbQ9U0LBHxYtZ1YSoXrfsezwH os http
  • 如何使用 svg 使 iframe“可聚焦”

    我想检测 iframe 上的点击 这建议 https stackoverflow com a 8101458 246719执行此操作的方法是捕获父窗口上的模糊事件 但是 当用户单击 iframe 内的 svg 时 它不会获得焦点 根窗口也不
  • 更改特定元素的滚动速度[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 好吧 我不知道如何编写脚本 但是在
  • 将元素 ID 传递给 Javascript 函数

    我看到了很多与我的问题标题相关的帖子 这是 HTML 代码
  • Java将Html转换为图像

    我生成了一个包含我客户信息的 Html 以便他可以将它们附加到您的网站或电子邮件中 但有些客户要求我生成图像而不是 html 我使用下面的代码生成图像 运行顺利 但是 html 中包含的图像没有生成 当我在浏览器中打开 HTML 代码时 它
  • Safari 6 (iOS 6) 弹性布局不会换行元素

    我需要将两个框放在列中 这在我测试过的其他浏览器中有效 但在 iOS 6 上的 Safari 6 中无效 例子 http jsfiddle net 5FESj 1 http jsfiddle net 5FESj 1 display webk
  • 检测 JavaScript 中的焦点丢失

    我希望能够检测 JavaScript 中任意元素何时失去焦点 因此我可以构建一个类似于 jEdit 的内联编辑工具 我不能依赖 jQuery 来实现这个库 所以我需要一个本机方法来完成它 我查看了 onblur 这似乎是正确的事情 但 MD
  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • Javascript 替换为正则表达式无法正常工作

    我正在尝试使用正则表达式验证名称 正则表达式阻止用户连续输入 2 个空格或点 这是我的代码 function test input var regex A Za z 0 1 s 0 1 input value input value rep
  • Ie11 不应用媒体查询样式

    IE11 忽略我的媒体查询并始终使用移动 CSS 奇怪的是 如果我改变浏览器宽度 即使只是 1 2 像素 浏览器也会自行渲染并显示媒体查询 我尝试了 css lint 我的 css 中没有错误 我的CSS没有什么特别的 只是简单的 css

随机推荐

  • 什么是软件测试?零基础入门知识要点总结篇,5分钟带你快速了解

    1 什么是软件测试 软件测试 英语 Software Testing 描述一种用来促进鉴定软件的正确性 完整性 安全性和质量的过程 换句话说 软件测试是一种实际输出与预期输出之间的审核或者比较过程 通俗的来讲 软件测试 就是软件测试人员验证
  • 如何使用 Flask 和 GPT-4 API 创建人工智能驱动的 Python Web 应用程序

    欢迎来到 Web 开发的未来 人工智能 AI 正在彻底改变我们创建在线应用程序并与之交互的方式 在这篇博文中 我们将向您介绍使用 Flask 网络框架和 OpenAI 最先进的 GPT 4 API 创建尖端的人工智能 Python 网络应用
  • Vue06/Vue中this.$nextTick( ) 的用法及详细介绍

    一 nextTick 语法 this nextTick 箭头函数体 作用 this nextTick这个方法作用是当数据被修改后使用这个方法 回调函数获取更新后的dom再渲染出来 注意 1 data改变 更新DOM是异步的 2 获取更新后的
  • 基于Camera2和MediaRecorder实现视频录制

    一 概述 视频录制 在一般开发中很少遇到 大部分开发工作都是写写页面 请求接口 展示数据等等 真要遇到 可能采用第三方库实现 一来实现快速 二来可能觉得别人实现的比较好 特别是在开发周期很紧的情况下 一般都不会自己花时间实现 其实最好是使用
  • 「AntV」使用AntV X6实现流程编排设计器

    通过对BPMN的深入学习 以及对业界成熟的流程编排设计器的调研 了解到要研发一个流程编排设计器 需要实现如下几个主要的功能 支持创建各种流程图元素 包括任务 活动 网关 事件等 支持绘制各种连接线 包括普通连接线 条件连接线 消息连接线等
  • osg学习(四十八)Windows Error #2000

    Windows Error 2000 Win32WindowingSystem OpenGLContext Unable to restore current OpenGL rendering context Reason 无效的像素格式
  • 海思移植opencv+人脸检测+速度优化

    文章为9crk大神发表在海思论坛 为了备忘 特转到自己博客 地址 http www ebaina com bbs thread 4858 1 1 html 1 确保ubuntu能上网 2 安装cmake 代码 全选 sudo apt get
  • 关于KEIL5编译出现“Target not createt”全系列解决办法——情况1:字节限制 RESTRICTED VERSION WITH 0800H BYTE CODE SIZE LIMIT

    前言 在KEIL5编程 往往遇到许多 Target not createt 即目标不能实现这类情况 由此为帮助大家解决这些问题特开此贴 情况如下 1 2K字节限制错误 ERROR RESTRICTED VERSION WITH 0800H
  • 01背包问题动态规划(二维数组)

    01背包问题动态规划 二维数组 问题描述 一个旅行者有一个最多能装 M 公斤的背包 现在有 n 件物品 它们的重量分别是W1 W2 Wn 它们的价值分别为C1 C2 Cn 求旅行者能获得最大总价值 输入格式 第一行 两个整数 M 背包容量
  • maven项目中新建Servlet问题

    maven项目中新建Servlet问题 该文章分享本人在maven基础学习中遇到的一些问题 以及解决的方法 在IDEA中创建一个maven的web骨架项目后 然后在src main下新建一个directory java 并且设置文件夹为So
  • 为什么选择软件测试这个岗位?(面经)

    面试官 这么多岗位 你为什么会选择软件测试这个岗位 言外之意 你比起这么多应聘者有什么优势 从以下方面回答 1 对软件测试的理解 2 对岗位职责的了解 用自己在大学期间的学习 实习以及自己的优势对于这个岗位有什么好处和满足这个岗位的招聘需求
  • 微信小程序保存图片到相册

    先来看小程序中的保存图片到相册的api wx saveImageToPhotosAlbum filePath test png 这个只是测试路径 没有效果 success res console log success fail funct
  • java环境检测_如何检查是否安装了java环境(即JRE)

    浏览器访问一些调用了图形界面的网页 需要使用JRE 这个时候我们就需要检测操作系统是否已经安装了java环境 JRE 1 点击开始菜单 输入cmd 2 在cmd窗口中输入java 若提示 java 不是内部或外部命令 也不是可运行的程序或批
  • Spring Boot系列之修改内置Tomcat版本

    背景 在 spring boot 出来之前 或者没有使用 spring boot 时 Java EE 开发时如果选择 tomcat servlet 需要自己指定 tomcat 版本 此处没有考虑那种直接把打包的 war 直接扔到本地安装的任
  • 流提取运算符( >> )过滤空白符

    流提取运算符 gt gt 过滤空白符 转载于 https www cnblogs com kevinGaoblog archive 2012 04 12 2444822 html
  • SpringBoot中Swagger2多包扫描问题

    API接口类没有能都放在同一个包下 是按功能模块分的 所以涉及多包扫描的问题 贴出来解决办法 Swagger在POM配置好后 修改SwaggerConfig类 我只贴出要修改的 直接用 swagger2的配置文件 在项目的启动类的同级文件建
  • idea中编写spark程序并打包到集群执行

    本篇主要介绍了如何使用IDEA在本地打包Spark应用程序 以K Means为例 并提交到集群执行 1 安装JDK与Scala SDK JDK和Scala SDK的安装在这里不再赘述 需要注意的是 要设置好环境变量 这样新建项目时就能自动检
  • matlab训练神经网络时,使用mse(均方误差)以外的性能函数。

    除了默认的mse 均方误差 这个性能函数外 还有mae 平均绝对误差 sae 绝对值和误差 sse 平方和误差 crossentropy 交叉熵 要调用其他性能函数 只需要加一行代码 net performFcn mae net是网络名 这
  • Python第二章作业(初级)

    第1关 三角形周长及面积 任务描述 输入的三角形的三条边a b c 的长度 计算并依次输出三角形的周长和面积 结果严格保留2位小数 测试用例的数据保证三角形三边数据可以构成三角形 三角形面积计算公式 公式 其中s a b c 2 输入格式
  • 添加锚点的三种方式

    1 通过链接跳转到指定id的位置 a href a 跳转到指定位置 a ul li 1 li li 1 li li style color red 2 li li 1 li li 1 li ul 2 只有对a标签有效的方法 设置name属性