空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别
空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别
在很多时候, 需要设置超链接不发生跳转,最有可能出现的场景是:
<a>的点击有更复杂的逻辑,需要通过onclick的函数才能完成,所以就不需要href。但是如果不加href属性,又没有超链接的页面效果,也就是不会出现下划线,以及点击之后字体样式的变化。特别是函数执行的是异步的请求,这种状况广泛的出现在一些前端框架里。
设置href属性点击不生效,称为空链接,常用的又两种方法:
<a href="#"></a> , 本页链接,链接到当前页面
<a href="javascript:;"></a>,空链接, 相比# , 如果有滚动条不会到顶部
这两种方式都是不产生跳转到效果。因为href可以直接识别JS的代码,所以可以使用javascript:的方式。
javascript: 是一个伪协议,通过链接调用一个javascript函数,如果函数为空,则调用的是
空函数。 javascript:;也可以写为javascript:void(0);,称为死链接,更常使用在Ajax中
<a href="javascript:void(0)"></a>
但是javascript:void(0) 的使用会有一些问题,比如在IE中会引起动画停止播发等问题。 href="#"又有可能发生页面滚动,可以使用两个或多个 # 就不会发生页面的滚动了。比如
<a href="#####"></a> 有滚动条不会到顶部
————————————————
版权声明:本文为CSDN博主「oscar999」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/oscar999/article/details/106799535
空链接的作用以及<a href="#"></a>和<a href="javascript:;"></a>的区别的更多相关文章
- html 空链接 href="#"与href="javascript:void(0)"的区别
#包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#但跳动到了页首 而javascrip ...
- 超链接(空链接-target-title属性)
空链接:<a href="#">内容</a> 超链接标签: <a href=" " >内容</a> 属性: hr ...
- incremental linking(增量链接)的作用
转:incremental linking(增量链接)的作用 今天编译一个C++程序时,报了一个奇怪的错误(之前是好好的): 1>LINK : fatal error LNK1123: fail ...
- Javascript中 a.href 和 a.getAttribute('href') 结果不完全一致
今天无意中发现这个么问题,页面上对所有A标签的href属性为空的自动添加一个链接地址,结果发现if判断条件始终都没生效,莫名其妙. 原来Javascript中 a.href 和 a.getAttrib ...
- a标签属性href值为#和javasrcript:void(0)的区别
当我们需要一个空链接时,通常有两种方法: <a href="#">这个一个空链接</a> <a href="javascript:void( ...
- 类属性与对象实现,init方法的作用,绑定方法,绑定方法与普通函数的区别,继承,抽象与继承,派生与覆盖
今日内容: 1.类属性与对象属性 2.init方法的作用 3.绑定方法 4.绑定方法与普通函数的区别(非绑定方法) 5.继承 6.抽象与继承 7.派生与覆盖 1.类属性与对象属性 类中应该进存储所有对 ...
- 关于js中"window.location.href"、"location.href"、"parent.location.href"、"top.location.href"的用法
location.href 和 window.location.href 区别: 1.location.href 可以直接跳转其他地址(不属于本项目) 也可以跳转本项目中的 2.window.loca ...
- 服务端技术进阶(六)Ant和Maven的作用是什么?两者之间功能、特点有哪些区别?
服务端技术进阶(六)Ant和Maven的作用是什么?两者之间功能.特点有哪些区别? Ant和Maven都是基于Java的构建(build)工具.理论上来说,有些类似于(Unix)C中的make ,但没 ...
- window.location.href和document.location.href、document.URL的区别
1.document表示的是一个文档对象,window表示的是一个窗口对象,一个窗口下可以有多个文档对象. 所以一个窗口下只有一个window.location.href,但是可能有多个documen ...
随机推荐
- HttpClient 在vivo内销浏览器的高并发实践优化
作者:vivo 互联网服务器团队- Zhi Guangquan HttpClient作为Java程序员最常用的Http工具,其对Http连接的管理能简化开发,并且提升连接重用效率:在正常情况下,Htt ...
- C# 创建标签PDF文件
Q1:关于"标签PDF文件(Tagged PDF)" 标签PDF文件包含描述文档结构和各种文档元素顺序的元数据,是一种包含后端提供的可访问标记,管理阅读顺序和文档内容表示的逻辑结构 ...
- 小k工具箱
个人开发软件 大小:21mb左右 基于JavaScript开发 支持系统:安卓/iOS/鸿蒙 未来可期上架各大应用市场 预览图 永久更新维护地址 官方讲解
- 数据结构与算法【Java】05---排序算法总结
前言 数据 data 结构(structure)是一门 研究组织数据方式的学科,有了编程语言也就有了数据结构.学好数据结构才可以编写出更加漂亮,更加有效率的代码. 要学习好数据结构就要多多考虑如何将生 ...
- java基础学习:java中的反射
一.什么是java反射 什么是 java 的反射? 说到反射,写这篇文章时,我突然想到了人的"反省",反省是什么?吾一日三省吾身,一般就是反思自身,今天做了哪些对或错的事情. ja ...
- jmeter性能测试之正则提取响应头或者响应体
准备工作做好,先发送请求 然后察看结果树中的响应消息 比如我们要提取这个cookie,先调试一下,看能不能提取到 看蓝色的线条,我们提取到了,然后我们把这句话写入到后置处理器中的正则表达式提取里 再次 ...
- ES 7.13版本设置索引模板和索引生命周期管理
第一步:索引管理中查看都有哪些索引文件,然后添加索引模式(后面的日期用*表示) 第二步:索引生命周期管理 自带的有一个log,就使用这个,不用再新建了,根据需求修改里面的配置就行了 第三步:添加索引模 ...
- 2.Ceph 基础篇 - 集群部署及故障排查
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247485243&idx=1&sn=e425c31a ...
- Elasticsearch:正确使用regexp搜索
- vue 自定义千位符过滤器
在main.js页面全局引入 Vue.filter('formatNum', function(value) { if(!value) return '' let num = value.toStri ...