这篇文章主要为大家详细介绍了HTML中a标签空链接href=#与href=javascript:void(0)的区别【转】,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。
在网页语言中a链接为空的写法,通常写为href=#或者href=javascript:void(0),这两种写法有什么区别呢?我想很多人都不会去深究,但是这两种写法出来的效果有时候是不一样的。概括来说,这两种写法有如下几个区别:
下面实例代码演示上述1、2点的区别:
<!doctypehtml><html><head><metacharset=UTF-8><title>a标签空链接href=#与href=javascript:void(0)的区别</title></head><body><pstyle=height:1300px;width:100%;background:#cccccc></p><pstyle=width:100%;padding:10px;background:#999999><ahref=#>空链接:href=#</a><br><ahref=javascript:void(0)>空链接:href=javascript:void(0)</a></p><pstyle=height:100px;width:100%;background:#cccccc></p></body></html>
使用 # 来定位页面的具体位置的实例代码:
<!doctypehtml><html><head><metacharset=UTF-8><title>a标签空链接href=#与href=javascript:void(0)的区别</title></head><body><pstyle=width:100%;padding:10px;background:#999999><ahref=#p1>跳到目标位置:href=#p1</a></p><pstyle=height:100px;width:100%;background:#cccccc></p><pid=p1style=height:1000px;width:100%;padding:10px;background:#999999>目标位置:id=p1</p></body></html>
为什么要使用href=”javascript:void(0);”,javascript:void(0) 什么时候使用?
href=”javascript:void(0);” 的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,而void(0)表示一个空的方法,也就是不执行js函数。
javascript:是伪协议,表示url的内容通过javascript执行。void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作。下面的语句:
<ahref=javascript:void(0)onclick=window.open()>
点击链接后,页面不动,只打开链接。而下面的语句:
<ahref=#onclick=javascript:returnfalse;>
作用一样,但不同浏览器会有差异。
多数情况下,当某一链接要执行一个javascript程序时,我们可以使用href=javascript:void(0)再加上onclick事件来实现,如下面实例代码:
<!doctypehtml><html><head><metacharset=UTF-8><title>a标签空链接href=#与href=javascript:void(0)的区别</title></head><body><pstyle=width:100%;padding:10px;background:#999999><ahref=javascript:void(0)onclick=func()>点击执行函数func()</a></p><script>functionfunc(){alert(ok);}</script></body></html>简介:void 是 javascript 的操作符,意思是:只执行表达式,但没有返回值。该表达式会被计算但是不会在当前文档处装入任何内容,例如,void(0) 计算为 0 ,但在JavaScript上没有任何效果,也就是说 <a href=javascript:void(0)> 的作用和 <a href=javascript:void(1)> 的作用是一样的。
void 操作符用法格式如下:
javascript:void(表达式)//推荐此写法javascript:void表达式
做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,例如点击链接后不做任何事情,代码如下:
<ahref=#>test</a>//点击链接,页面默认上滚到页的顶部,但可以加上onclick=returnfalse,防止上滚到页的顶部<ahref=####>test</a>//使用2个到4个#,见的大多是####,也有使用#all等其他的。默认不上滚到页的顶部<ahref=javascript:void(0);>test</a>//新浪微博写法,javascript:void(0)仅仅表示一个死链接,执行空事件<ahref=javascript:;>test</a>//QQ空间写法
点击链接后,响应用户自定义的点击事件
<ahref=javascript:void(0)onclick=func()>test</a>//其中func()是javascript方法,即函数<ahref=#onclick=func();returnfalse;>//什么问题都解决了,包括浏览器不兼容问题</a>或者直接使用href=<ahref=#onclick=alert();event.returnValue=false;>test</a>
在 Ajax 中,都会常见如下的代码:
<ahref=javascript:doTest2();void(0);>here</a>但这里的void(0)究竟是何含义呢?
Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值。在 Ajax 的页面,实现的是无刷新操作,使用 void(0)也 比较多。看一下Ajax的web页面的话,一般都会看到有很多的void(0),所以在使用void(0)之前,好先想一想,这个页面是否需要整体刷新。
做页面时,如果是个# ,就会出现跳到顶部的情况,个人收藏的几种解决方法,其中,# 包含了一个位置信息,默认的锚点是#top 也就是网页的上端。
<ahref=####></a><ahref=javascript:void(0)></a><ahref=javascript:void(null)></a><ahref=#onclick=returnfalse></a><spanstyle=cursor:hand></span>(好像在FF中不能显示)
上述代码打包下载:https://pan.baidu.com/s/1HSJybrJyvmxSVHsBC7Aikg
以上就是HTML中a标签空链接href=#与href=javascript:void(0)的区别【转】的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持武林网。