您的位置:首頁>正文

超級連結玩出花!href= =javascript:;=javascript:void(0)之區別

很多年前華哥製作網站當處在測試階段時, 由於所要連結的最終頁面url並沒有確定, 但又需當滑鼠移至某個連結時所看到的是個手型(即可以點擊的連結形態), 就給a標籤的href屬性加上一個#號, 如下:

你可以點我推我哦〜可是我不會為你開另一扇門

試著點一下的話, 它只會跳到當前網頁的頂部, 不會打開別的網頁。

在網站製作的測試階段, 可以把href=#當成一個虛的連結, 或一個假連結來用(至少我以前就是這麼幹的, 特別是在製作範本html時, 後面會被替換為有具體指向的url頁面), 然而實際上從認知上來說, href=#並不是虛的、假的或空的連結, 它是錨連結。 為了不至於理解混亂, 就需要參考w3c給出的標準解釋。 以下參考w3cschool。

標籤的 href 屬性用於指定超連結目標的 URL, 即 a標記的href 屬性, 它指示連結的目標, 通常連結目標是另一個url網頁, 如href=”abc.htm”, 當連結目標寫為#號時, 它包含了頁面的位置資訊,

實際上是href=”#top”的簡寫(即位置資訊是頁面頂部), 它指的是href屬性中的錨 URL – 指向頁面中的某個錨。 注:#top是天生就存在的。

點擊#號, 就跳至頁面頂部, 這說明至少發生了點什麼。

要是什麼也不要讓它發生, 那當如何呢?

現在看前端程式師寫的代碼, 很多連結採用, 例如:

示例url1:http://www.xueerxing.com/

示例url2:https://www.kujiale.com/wenba/question/139965

那這兩個東東, 到底是什麼意思, 起到什麼作用呢?

1.按一下此處什麼也不會發生

void 是JavaScript 的一個運算子, 表示點擊這個連結後執行一條javascript語句:void(0); void(0)計算一個運算式但是不返回值, 這條語句表示什麼也不會做, 是個空語句。

2.我的大學

javascript: 是一個偽協議(如同常見的mail:、tel:)。 它可以讓我們通過一個連結來調用javascript函數。

javascript:是表示在觸發默認動作時, 執行一段JavaScript代碼, 去掉a標籤的默認行為;而 javascript:; 表示什麼都不執行(華哥理解:這和void(0)是一個意思嘛,

什麼也不做, 就像條死魚那樣, 不管你怎麼點它撩它, 它都沒有一點兒生理反應), 這樣點擊時就沒有任何反應。

採用這個方式 javascript:;可以實現A標籤的點擊事件運行時, 如果頁面內容很多, 有捲軸時, 頁面不會亂跳, 使用者體驗更好。

最後華哥從使用角度, 加以簡單的歸納總結與區分。

href=#是錨連接。 有時會把它當成空連結來用, 測試階段無關緊要, 用在網站成品中則是很low的(程式師會鄙視)。

javascript:void(0)就是什麼都不做的意思。 它僅僅表示一個死連結, 是真正的死連結, 在連結中調用腳本時候最好用void(0)。

javascript:;和javascript:void(0),道理上應當是不同的, 但使用上沒看出啥差別, 或許javascript:;用戶體驗更好?你喜歡哪個就擼哪個吧。

一切變化不離其宗, 最後, 再來溫習下w3c給出的a標籤的href屬性說明和javascript的void()操作符。

href 屬性定義和用法

標籤的 href 屬性用於指定超連結目標的 URL。

href 屬性的值可以是任何有效文檔的相對或絕對 URL, 包括片段識別字和 JavaScript 程式碼片段。 如果用戶選擇了 標籤中的內容, 那麼流覽器會嘗試檢索並顯示 href 屬性指定的 URL 所表示的文檔, 或者執行 JavaScript 運算式、方法和函數的清單。

javascript:void(0) 含義

javascript:void(0) 中最關鍵的是 void 關鍵字, void 是 JavaScript 中非常重要的關鍵字, 該操作符指定要計算一個運算式但是不返回值。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示