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

發表時間： 2013-04-10

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

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

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

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

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

文章目錄

一、利用CSS隱藏超連結虛線框
二、利用 jQuery 解決超連結虛線問題

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

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

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