href=#|href=javascript:;|href=javascript:void(0)之用法区别,超级链接也能玩出花!

很多年前华哥制作网站当处在测试阶段时,由于所要链接的最终页面url并没有确定,但又需当鼠标移至某个链接时所看到的是个手型(即可以点击的链接形态),就给a标签的href属性加上一个#号,如下:
<a href=”#”>你可以点我推我哦〜可是我不会为你开另一扇门</a>
试着点一下的话,它只会跳到当前网页的顶部,不会打开别的网页。

开另一扇门

在网站制作的测试阶段,可以把href=#当成一个虚的链接,或一个假链接来用(至少我以前就是这么干的,特别是在制作模板html时,后面会被替换为有具体指向的url页面),然而实际上从认知上来说,href=#并不是虚的、假的或空的链接,它是锚链接。为了不至于理解混乱,就需要参考w3c给出的标准解释。以下参考w3cschool。

<a> 标签的 href 属性用于指定超链接目标的 URL,即 a标记的href 属性,它指示链接的目标,通常链接目标是另一个url网页,如href=”abc.htm”,当链接目标写为#号时,它包含了页面的位置信息,实际上是href=”#top”的简写(即位置信息是页面顶部),它指的是href属性中的锚 URL – 指向页面中的某个锚。注:#top是天生就存在的。

更多参见:
HTML <a> 标签
HTML <a> 标签的 href 属性

点击#号,就跳至页面顶部,这说明至少发生了点什么。

要是什么也不要让它发生,那当如何呢?

现在看前端程序员写的代码,很多链接采用<a href=”javascript:;”>或<a href=”javascript:void(0)”>或<a href=”javascript:void”>,例如:

学而行营销网 示例url:http://www.xueerxing.com/

学而行营销网 示例url

酷家乐,示例url:https://www.kujiale.com/wenba/question/139965

酷家乐javascript:;

那这两个东东,到底是什么意思,起到什么作用呢?

1.<a href=”javascript:void(0)”>单击此处什么也不会发生</a>

void 是JavaScript 的一个运算符,表示点击这个链接后执行一条javascript语句:void(0); void(0)计算一个表达式但是不返回值,这条语句表示什么也不会做,是个空语句。

2.<a href=”javascript:;”>我的大学</a>

javascript: 是一个伪协议(如同常见的mail:、tel:)。它可以让我们通过一个链接来调用javascript函数。

javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,去掉a标签的默认行为;而 javascript:; 表示什么都不执行(华哥理解:这和void(0)是一个意思嘛,什么也不做,就像条死鱼那样,不管你怎么点它撩它,它都没有一点儿生理反应),这样点击<a>时就没有任何反应。

采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好

最后华哥从使用角度,加以简单的归纳总结与区分。

  • href=#是锚连接。有时会把它当成空链接来用,测试阶段无关紧要,用在网站成品中则是很low的(程序员会鄙视😒)。
  • javascript:void(0)就是什么都不做的意思。它仅仅表示一个死链接,是真正的死链接,在链接中调用脚本时候最好用void(0)。
  • javascript:;和javascript:void(0),道理上应当是不同的,但使用上没看出啥差别,或许javascript:;用户体验更好?你喜欢哪个就撸哪个吧。

一切变化不离其宗,最后,再来温习下w3c给出的a标签的href属性说明和javascript的void()操作符。

href 属性定义和用法
<a> 标签的 href 属性用于指定超链接目标的 URL。

href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了 <a> 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。

javascript:void(0) 含义
javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。

这篇文章对俺有帮助,打赏犒劳下作者吧〜

本文链接:肖运华 » 网站策划设计制作优化 » href=#|href=javascript:;|href=javascript:void(0)之用法区别,超级链接也能玩出花!
原创文章,转载请注明:http://www.xiaoyunhua.com/2055.html

发表评论

电子邮件地址不会被公开。