[教學]使用jQuery和CSS去除超連結虛線

在瀏覽器預設狀況下,當您點了超連結之後,外框會自動出現虛線,因為這跟瀏覽器的focus焦點有關,可是在網頁的整體版面配置規劃與呈現上,這樣的虛線會影響整體美觀,這時候我們可以透過CSS來去除這個超連結外框,讓網頁版面配置上可以比較美觀,如果使用CSS調整失敗的話,也可以透過jQuery進行超連結去除,以達到美化效果。

這個虛線框是屬於a屬性的擬類別「:focus」,這東西規範於CSS2,讓所有超連結點到之後可以顯示其虛線外框,但這個虛線外框並不影響網頁的位置計算排版,簡單說可以想像他是浮在上面的,就算出現虛線外框也不會讓網頁版面位移,但這個做法只是讓網頁看起來比較不好看,多了一個外框虛線總覺得有點怪怪,所以就讓我們來去除虛線吧!


想要去除超連結虛線方式有兩種,一種是透過CSS的語法來將其屬性取消掉,但是這個作法不一定所有瀏覽器都支援,所以我們可以改用jQuery來解決,因為jQuery可以解決瀏覽器相容性問題,所以透過他來改變這條虛線就可以了,一串語法,一次搞定超連結虛線問題,讓網頁的版面可以更好看些,操作方式很簡單,引入jQuery函式庫與自訂一段語法即可解決。

讓我們看一下所謂的超連結虛線框是怎樣的一個狀況,在沒有設定調整的狀況下,你會看到超連結點了之後會出現虛線框,這時會讓人覺得怪怪的,如果對於網頁比較龜毛的人來講,會覺得這超連結虛線框有些多餘,所以我們現在就是要來清除這個虛線框,以下將介紹透過CSS和jQuery兩種方式進行解決這個超連結虛線外框問題。

[教學]使用jQuery和CSS去除超連結虛線

一、利用CSS隱藏超連結虛線框

其實這虛線框的屬性設定是「outline」,所以我們可以在全域的CSS設定上,針對所有帶有a連結的將他們取消就可以了,所以在網站CSS檔案中,找到a屬性並加入:「outline: medium none;」即可解決。不過這樣的解決方法可能會在IE中失效,那麼你可以保留這方法並且再加入jQuery去除虛線框的方法。

[教學]使用jQuery和CSS去除超連結虛線

二、利用 jQuery 解決超連結虛線問題

透過jQuery的做法,首先我們必須在</head>標籤之前引入jQuery函式庫,函式庫的部分可以使用Google CDN的方式載入,可以節省網站流量加快網站。簡單介紹一下作法如下,引入的話就是在head的地方加入:

接著在函式庫引用的下方,加入這段語法,這樣效果就出現囉!