|
|
|
|
|
我們?cè)谑褂?a target="_blank" href="http://howtostagehomes.com/tutorial/html/tags/a%E6%A0%87%E7%AD%BE/">a標(biāo)簽的空鏈接時(shí),通常寫為 href=#
或者 href=javascript:void(0)
,這兩種寫法有什么區(qū)別呢?我想很多人都不會(huì)去深究,但是這兩種寫法出來(lái)的效果有時(shí)候是不一樣的。
概括來(lái)說(shuō),這兩種寫法有如下幾個(gè)區(qū)別:
#top
也就是網(wǎng)頁(yè)的上端。即是說(shuō),當(dāng) href=#
的空鏈接被點(diǎn)擊時(shí),頁(yè)面會(huì)跳到最頂端。javascript:void(0)
僅僅表示一個(gè)死鏈接,當(dāng) href=javascript:void(0)
的空鏈接被點(diǎn)擊時(shí),頁(yè)面不會(huì)有任何反應(yīng)。# + id
。javascript:void(0)
。下面實(shí)例代碼演示上述1、2點(diǎn)的區(qū)別:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別</title>
</head>
<body>
<p style="height:1300px;width:100%;background:#cccccc"></p>
<p style="width:100%;padding:10px;background:#999999">
<a href="#">空鏈接: href=#</a>
<br>
<a href="javascript:void(0)">空鏈接: href=javascript:void(0)</a>
</p>
<p style="height:100px;width:100%;background:#cccccc"></p>
</body>
</html>
使用 # 來(lái)定位頁(yè)面的具體位置的實(shí)例代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別</title>
</head>
<body>
<p style="width:100%;padding:10px;background:#999999">
<a href="#p1">跳到目標(biāo)位置: href=#p1</a>
</p>
<p style="height:100px;width:100%;background:#cccccc"></p>
<p id="p1" style="height:1000px;width:100%;padding:10px;background:#999999">目標(biāo)位置:id="p1" </p>
</body>
</html>
為什么要使用href=”javascript:void(0);”
,javascript:void(0)
什么時(shí)候使用?
href=”javascript:void(0);”
的含義是,讓超鏈接去執(zhí)行一個(gè)js函數(shù),而不是去跳轉(zhuǎn)到一個(gè)地址,而void(0)
表示一個(gè)空的方法,也就是不執(zhí)行js函數(shù)。
javascript:
是偽協(xié)議,表示url的內(nèi)容通過(guò)javascript執(zhí)行。void(0)
表示不作任何操作,這樣會(huì)防止鏈接跳轉(zhuǎn)到其他頁(yè)面。這么做往往是為了保留鏈接的樣式,但不讓鏈接執(zhí)行實(shí)際操作。下面的語(yǔ)句:
<a href="javascript:void(0)" onclick="window.open()">
點(diǎn)擊鏈接后,頁(yè)面不動(dòng),只打開鏈接。而下面的語(yǔ)句:
<a href="#" onclick="javascript:return false;">
作用一樣,但不同瀏覽器會(huì)有差異。
多數(shù)情況下,當(dāng)某一鏈接要執(zhí)行一個(gè)javascript程序時(shí),我們可以使用href=javascript:void(0)
再加上onclick事件來(lái)實(shí)現(xiàn),如下面實(shí)例代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別</title>
</head>
<body>
<p style="width:100%;padding:10px;background:#999999">
<a href=javascript:void(0) onclick=func()>點(diǎn)擊執(zhí)行函數(shù)func()</a>
</p>
<script>
function func(){
alert("ok");
}
</script>
</body>
</html>
簡(jiǎn)介:
void 是 javascript 的操作符,意思是:只執(zhí)行表達(dá)式,但沒(méi)有返回值。該表達(dá)式會(huì)被計(jì)算但是不會(huì)在當(dāng)前文檔處裝入任何內(nèi)容,例如,void(0)
計(jì)算為 0 ,但在JavaScript上沒(méi)有任何效果,也就是說(shuō) <a href="javascript:void(0)">
的作用和 <a href="javascript:void(1)">
的作用是一樣的。
void 操作符用法格式如下:
javascript:void (表達(dá)式) //推薦此寫法
javascript:void 表達(dá)式
做頁(yè)面時(shí),如果想做一個(gè)鏈接點(diǎn)擊后不做任何事情,或者響應(yīng)點(diǎn)擊而完成其他事情,例如點(diǎn)擊鏈接后不做任何事情,代碼如下:
<a href="#" >test</a> //點(diǎn)擊鏈接,頁(yè)面默認(rèn)上滾到頁(yè)的頂部,但可以加上 onclick="return false",防止上滾到頁(yè)的頂部
<a href="####" >test</a> //使用2個(gè)到4個(gè)#,見(jiàn)的大多是"####",也有使用"#all"等其他的。默認(rèn)不上滾到頁(yè)的頂部
<a href="javascript:void(0);" >test</a> //新浪微博寫法,javascript:void(0) 僅僅表示一個(gè)死鏈接,執(zhí)行空事件
<a href="javascript:;" >test</a> //QQ空間寫法
點(diǎn)擊鏈接后,響應(yīng)用戶自定義的點(diǎn)擊事件
<a href="javascript:void(0)" onclick="func()">test</a> //其中func() 是 javascript 方法,即函數(shù)
<a href="#" onclick="func();return false;"> //什么問(wèn)題都解決了,包括瀏覽器不兼容問(wèn)題</a> 或者直接使用href=""
<a href="#" onclick="alert();event.returnValue=false;">test</a>
在 Ajax 中,都會(huì)常見(jiàn)如下的代碼:
<a href="javascript:doTest2();void(0);">here</a>
但這里的void(0)究竟是何含義呢?
Javascript中void是一個(gè)操作符,該操作符指定要計(jì)算一個(gè)表達(dá)式但是不返回值。
在 Ajax 的頁(yè)面,實(shí)現(xiàn)的是無(wú)刷新操作,使用 void(0)
也 比較多??匆幌翧jax的web頁(yè)面的話,一般都會(huì)看到有很多的void(0)
,所以在使用void(0)
之前,好先想一想,這個(gè)頁(yè)面是否需要整體刷新。
做頁(yè)面時(shí),如果是個(gè)# ,就會(huì)出現(xiàn)跳到頂部的情況,個(gè)人收藏的幾種解決方法,其中,"#" 包含了一個(gè)位置信息,默認(rèn)的錨點(diǎn)是#top
也就是網(wǎng)頁(yè)的上端。
<a href="####"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(null)"></a>
<a href="#" onclick="return false"></a>
<span style="cursor:hand"></span>(好像在FF中不能顯示)