在網(wǎng)頁(yè)語(yǔ)言中a鏈接為空的寫(xiě)法,通常寫(xiě)為 href=# 或者 href=javascript:void(0) ,這兩種寫(xiě)法有什么區(qū)別呢?我想很多人都不會(huì)去深究,但是這兩種寫(xiě)法出來(lái)的效果有時(shí)候是不一樣的。概括來(lái)說(shuō),這兩種寫(xiě)法有如下幾個(gè)區(qū)別:
# 包含了一個(gè)位置信息,默認(rèn)的錨是 #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);
在頁(yè)面很長(zhǎng)的時(shí)候會(huì)使用 # 來(lái)定位頁(yè)面的具體位置,格式為:# + id;
如果你要定義一個(gè)死鏈接請(qǐng)使用 javascript:void(0) ;
下面實(shí)例代碼演示上述1、2點(diǎn)的區(qū)別:
<!doctype html><html><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><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),只打開(kāi)鏈接。而下面的語(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><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á)式) //推薦此寫(xiě)法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>//新浪微博寫(xiě)法,javascript:void(0) 僅僅表示一個(gè)死鏈接,執(zhí)行空事件<a href="javascript:;" >test</a>//QQ空間寫(xiě)法
點(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)也 比較多。看一下Ajax的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中不能顯示)
上述代碼打包下載:https://pan.baidu.com/s/1HSJybrJyvmxSVHsBC7Aikg
以上就是HTML中a標(biāo)簽空鏈接href=#與href=javascript:void(0)的區(qū)別【轉(zhuǎn)】的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)和解決疑問(wèn)有所幫助,也希望大家多多支持武林網(wǎng)。新聞熱點(diǎn)
疑難解答