這篇文章主要為大家詳細介紹了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)的區別【轉】的全部內容,希望對大家的學習和解決疑問有所幫助,也希望大家多多支持武林網。