[教學]使用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的地方加入:
[gist id=5476657 file=step1.html]
接著在函式庫引用的下方,加入這段語法,這樣效果就出現囉!
[gist id=5476657 file=step2.html]

在Google News上追蹤我們最新文章
香腸
香腸

喜歡在網路上透過文字與圖片分文章教學,默默地用鍵盤烤了9年的香腸。另外還身兼阿腸接案餬口飯吃。對了,別叫我阿腸,請叫我香腸,這樣我才知道你看我部落格長大的。

文章: 1781

1 則留言

  1. 您好
    我在我的網站新增一個子網站(網站內容要都一樣,數據要不同步)
    例如http://00000.com/增一個http://00000.com/1/或是http://1.00000.com/
    我已做了
    1.新增資料庫也添加了使用者也設置了使用者權限
    2.FTP也上傳了程式
    3.資料庫內也導入了原網站的所有表
    4.也添加了子域名

    目前子網域是正常可以顯示及運作
    可是…數據卻還是跟主網站同步的
    請問
    是哪裡沒有設置到呢?

    FTP裡面的檔案我是用FTP下載再上傳的,難到不能用FTP傳?
    還是需要修改資料表的前綴名稱?
    還是修改database.php的設定?(我找不到database.php)
    若是差這2步驟的話,這要怎麼改呢?
    若不是!那是哪個環節沒有做呢?

    謝謝

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料