有時為了方便讓瀏覽者能一眼就看出內部跟外部連結，因此會在外部連結後面加上一個
圖示。但~~如果要我們一一自行加上這樣的圖示是不可能的！！雖然我們在「依連結的檔案類型顯示圖示」有學到如何使用 jQuery 來依連結的副檔名來加上相對應的圖示，不過要用在此次的效果時，整個程式就會變的比較複雜，所以我們要改用另一種方式來達成。
廢話就不多說了，讓我們直接來看 HTML 的部份
1 2 3 4 5 6 | <ul> <li><a href="https://www.google.com">Google</a></li> <li><a href="http://abgne.tw/apply-jquery/jquery-puzzle.html">圖片拼圖化</a></li> <li><a href="http://www.flycan.com">飛肯設計學苑</a></li> <li><a href="http://abgne.tw/apply-jquery/jquery-animate-menu-1.html">動畫賀聯式選單</a></li> </ul> |
這邊看到的就是很簡單的 ul 及 li 的使用，然後我們再用 CSS 來修飾一下
1 2 3 4 5 6 7 8 9 10 11 | ul, li { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } |
我把 ul 及 li 的邊界、距都設成 0，並且把樣式都取消，然後讓我們的超連結預設是沒有底線的，只有當滑鼠移到連結時才會顯示底線來。先看一下預覽樣式：
在開始動手寫 Script 之前，先讓我們看一下超連結基本屬性
1 | <a href="http://abgne.tw/apply-jquery/jquery-puzzle.html">圖片拼圖化</a> |
其中的 abgne.tw 就是所謂的主機名稱(hostname)，且在超連結中要使用 http(s) 開頭才行，所以我們要判斷是否為外部連結的話，只要判斷超連結的 hostname 跟目前網站的 hostname 是否一樣就可以了。
因此，我們現在使用 jQuery 的 filter() 來對超連結進行篩選
1 2 3 4 5 6 7 | $(function(){ // 過濾 ul 中的 a 元素 $("ul a").filter(function(){ // 如果有 hostname 且 hostname 跟現在的 hostname 不一樣時 return this.hostname && this.hostname != 'abgne.tw'; }).after(" <img src='external.png' alt='外部連結' align='absmiddle' />"); }); |
我們這邊就是先篩選出有 hostname 且 hostname 跟目前網站的 hostname 不一樣的超連結，當已經篩選出外部連結之後，我們只要在它後面插入圖示就可以囉。
讓我們來看看效果是如何：
這樣是不是簡單又容易讓瀏覽者一眼就分辨出來呢！但是啊~~如果把滑鼠移到圖示上會顯示出外部連結的提示，不過我比較想要讓它能有超連結的效果耶。雖然我們能幫圖示再加上超連結，不過這樣就~太超過了。所以我就改用另一種方式來表達：
只需要修改 jQuery 的語法就好，其它 HTML 及 CSS 都不用動
1 2 3 4 5 6 7 8 9 10 | $(function(){ // 過濾 ul 中的 a 元素 $("ul a").filter(function(){ // 如果有 hostname 且 hostname 中沒有 abgne.tw 的內容時 return this.hostname && this.hostname.indexOf('abgne.tw') < 0; }).css({ background: "url(external.png) no-repeat right", paddingRight: 15 }).attr("target", "_blank"); // 新視窗開啟 }); |
一樣是要先篩選出超連結，只是篩選出來後，我們這次不是在它後面插入圖示，而是把圖示當成超連結的背景圖片(background-image)，然後讓它出現在超連結的右邊，因為要讓它能正常顯示，所以我們同時要把它的 padding-right 往右推擠過去才行。同時還加入了讓外部連結能用開新視窗的方式來連結。
當我們完成後，如果把滑鼠移到圖示時就會變成
有沒有看到啊~~現在圖示就是跟超連結融合在一起囉！但缺點就是不會有外部連結的提示字串了，真是有一好沒兩好啊！！(要做到也是可以，只是會更麻煩一點)
另外，不知道各位有沒有注意到，我在篩選的過程中，是判斷超連結的 hostname 有沒有包含 xuite.net 的字串，而不是相等於 location.hostname。這是因為有可能我們本身有多個子網域可使用，雖然 hostname 可能是不一樣，但都一樣是屬於站內，所以我們可以透過這樣的方式來自訂更進階的篩選條件。