这几天正在仿写一个网站demo,有些细节地方想不明白就查看了网站码源学习学习,发现自己的<a>标签与源码诸多不同,虽然之前就看过很多的网站的代码都有这个<a href="javascript:;"></a>或这个<a href="javascript:void(0);></a>",但还是产生了疑问:

1.这种写法的作用是什么?

2.为什么这样写?

于是随手Google之,排名第一的是张鑫旭大神的一篇文章,第二个就是在stackoverflow上的问答。

由于张大神的这篇文章也是提出了自己的一些疑问而解释的较少,故在这里就不细说了。

接下来我就来看看stackoverflow上关于这个问题的高票回答。

An <a>element is invalid HTML unless it has either an href or name attribute.

If you want it to render correctly as a link (ie underlined, hand pointer, etc), then it will only do so if it has a href attribute.

Code like this is therefore sometimes used as a way of making a link, but without having to provide an actual URL in the href attribute. The developer obviously wanted the link itself not to do anything, and this was the easiest way he knew.

He probably has some javascript event code elsewhere which is triggered when the link is clicked, and that will be what he wants to actually happen, but he wants it to look like a normal <a>tag link.

Some developers usehref='#'for the same purpose, but this causes the browser to jump to the top of the page, which may not be wanted. And he couldn't simply leave the href blank, because href=''is a link back to the current page (ie it causes a page refresh).

There are ways around these things. Using an empty bit of Javascript code in the href is one of them, and although it isn't the best solution, it does work.

看完之后真的是豁然开朗,故写此文以敬之。

现在我就来总结一下这位名叫Spudley的大神(是真的大神,被他的主页震惊了)的回答要点:

1.首先<a>标签要想起作用就必须有个name属性或是href属性,这是前提;

2.其次<a>标签若想有类似链接的效果,比如下划线或者是手状的鼠标等,就需要有href属性;

3.有的人会使用href="#"来实现相同的目的,但是#会使浏览器跳转到页面顶部;若使用href=''的话会重新刷新页面,显然也是不必要的。

4.在href中使用一个空的Javascript代码是其中的一个解决方法,虽然它不是最好的解决方案,但它可以工作。

真的是远离某度保性命,常用google涨姿势呀。

转载于:https://www.cnblogs.com/syqcoding-life/p/9821815.html

关于 href=javascript:; 到底做了什么相关推荐

  1. 一个菜鸟的暑期到底做了些什么

    一个菜鸟的暑期都做了些什么 linux虚拟机的搭建 PhotoShop的学习 暑期主攻:Web前端 总结 linux虚拟机的搭建 先从最简单的开始说起,依据网上的流程以及学长的帮助,搭建好了虚拟机,但 ...

  2. a href=javascript:;/a

    有时会在网页a标签中看到这样的代码,比如: <a href="javascript:;">反选</a> 这是啥意思呢? 我们知道标签的 href属性用于指定 ...

  3. a标签中href=javascript:;表示什么意思??

    2019独角兽企业重金招聘Python工程师标准>>> javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等. 1 < a  i ...

  4. a标签href=”javascript;void(0)

    href="javascript:void(0)" href="javascript:void(0)"这个的含义是,让超链接去执行一个js函数,而不是去跳转到一 ...

  5. href=“JavaScript:;”是啥意思?

    这几天有人问到,在a标签里面,href='javascript:;'是啥意思 我理解的是这样的: 首先:<a> 标签中必须提供 href 属性 但是这个就出现了一个问题,如果我不想让他跳转 ...

  6. href=#与href=javascript:void(0)的区别

    href="#"与href="javascript:void(0)"的区别 # 包含了一个位置信息,默认的锚是#top 也就是网页的上端. 而javascrip ...

  7. a href=#与 a href=javascript:void(0) 的差别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  8. a href=#与 a href=javascript:void(0) 的区别 打开新窗口链接的几种办法

    #包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是 跳动到了页首 而javas ...

  9. a标签阻止链接跳转(href=‘javascript:;‘)

    <a href='javascript:;'>删除</a>

最新文章

  1. R语言伪相关性分析(Spurious Correlation)、相关关系不是因果关系:以哺乳动物数据集msleep为例
  2. java new collection_使用Java 8新增的Predicate操作Collection集合
  3. Final Cut Pro X如何去视频水印/视频去水印
  4. JAVASCRIPT 等比例缩放图片 限定最大宽度和最大高度
  5. C# CKEditor、CKFinder集成使用
  6. mfc cimage加载显示图片_在微信小程序里实现图片预加载组件
  7. 测试功能范围_软件测试难学吗?
  8. hdoj1789:Doing Homework again (贪心)
  9. 关于ubuntu拒绝被ssh访问
  10. mysql left join测试
  11. 机器学习十大算法的核心思想、工作原理、适用 情况及优缺点
  12. Fiddler V5中文版
  13. 用户故事与敏捷方法—用户故事的优势
  14. 量化交易入门--写第一个量化程序
  15. FusionInsight
  16. 如何去除ul小圆点的html,html里面ul那个点怎么消
  17. ppt在线转换成pdf
  18. 深度网络的训练经验总结(参数篇)
  19. 免费淘宝相册系统网站源码 v9.2
  20. 圣斗士星矢 斗士之魂

热门文章

  1. python flask flash消息闪现
  2. PHP实现简单顺序栈
  3. ASP实现记住密码的功能
  4. crackme算法分析---CRC32算法的妙用
  5. 什么是 Java 对象深拷贝?面试必问!
  6. 作为高管,你需要了解的五个ERP趋势
  7. 现代环境下的网络分割
  8. 框架:servlet和MVC
  9. Java 分割字符串的方法String.split()底层原理
  10. html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法,中间自适应,左右宽度固定...