Home » jQuery 應用

[jQ]依連結的檔案類型顯示圖示

[ 日期： | 瀏覽：17,160 | 迴響：8 ]
範例 1
範例 2
請協助我把這個效果加到我的網站 (只要 300 元)
沒錯!只要 300 元就能獲得我們團隊完整的協助，讓效果能迅速的整合到您的網站，並保證瀏覽器的相容性。
立刻申請!

一般的超連結是無法直接看出所連結的內容是什麼的，除非是把滑鼠移到連結上面，此時才有可能在瀏覽器的狀態中看到連結的內容。

若連結的內容是 Word檔、Zip檔時，能顯示相關的圖示的話，那就能比較清楚連結是什麼內容了。當然我們不可能一一自己去判斷連結內容再加上圖示，所以要仰賴程式來判斷。這邊我使用 jQuery 來做我 JavaScript 的主要框架，所以接下來的程式是要先載入 jQuery 才有效的喔。

假設我網頁中有以下連結內容

檢視原始碼 HTML
1
2
3
4
5
6

<ul>
	<li><a href="http://localhost/demo.pdf">PDF檔案下載</a></li>
	<li><a href="http://localhost/demo.doc">Word檔案下載</a></li>
	<li><a href="http://localhost/demo.mp3">Mp3檔案下載</a></li>
	<li><a href="http://localhost/demo.zip">Zip檔案下載</a></li>
</ul>

在網頁顯示時的畫面
jquery-link-icon-1
接著加入判斷連結內容的語法

檢視原始碼 JavaScript
1
2
3
4
5
6
7

$(function(){
	// 判斷連結的內容，並依內容在連結後加上相對應的圖片
	$('a[href$=".mp3"]').after('&nbsp;<img src="img/mp3.gif" alt="" />');
	$('a[href$=".pdf"]').after('&nbsp;<img src="img/pdf.gif" alt="" />');
	$('a[href$=".doc"]').after('&nbsp;<img src="img/word.gif" alt="" />');
	$('a[href$=".zip"]').after('&nbsp;<img src="img/zip.gif" alt="" />');
});

我們看一下加入語法後的效果
jquery-link-icon-0
這樣看起來比較清楚明瞭連結的內容了吧。如果要再連結前加上圖示的話，只要把 after() 改為 before() 即可。

檢視原始碼 JavaScript
1
2
3
4
5
6
7

$(function(){
	// 判斷連結的內容，並依內容在連結前加上相對應的圖片
	$('a[href$=".mp3"]').before('<img src="img/mp3.gif" alt="" />&nbsp;');
	$('a[href$=".pdf"]').before('<img src="img/pdf.gif" alt="" />&nbsp;');
	$('a[href$=".doc"]').before('<img src="img/word.gif" alt="" />&nbsp;');
	$('a[href$=".zip"]').before('<img src="img/zip.gif" alt="" />&nbsp;');
});

效果畫面
jquery-link-icon-2
如果要讓連結是透過新開視窗的話，只要幫連結的 target 設為 _blank 即可。

檢視原始碼 JavaScript
1
2
3
4
5
6
7

$(function(){
	// 判斷連結的內容，並依內容在連結後加上相對應的圖片
	$('a[href$=".mp3"]').attr('target', '_blank').after('&nbsp;<img src="img/mp3.gif" alt="" />');
	$('a[href$=".pdf"]').attr('target', '_blank').after('&nbsp;<img src="img/pdf.gif" alt="" />');
	$('a[href$=".doc"]').attr('target', '_blank').after('&nbsp;<img src="img/word.gif" alt="" />');
	$('a[href$=".zip"]').attr('target', '_blank').after('&nbsp;<img src="img/zip.gif" alt="" />');
});

如果要自訂其它不同的內容的話，只要加入新的判斷

檢視原始碼 JavaScript
1

$('a[href$=".自訂內容"]').attr('target', '_blank').after('<img src="顯示圖檔" alt="" />');

把自訂內容替換為要判斷的內容及放上要顯示的圖檔就可以了！

範例 1 範例 2 範例 3

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定
Zepto 版本 會員限定

8 筆針對 [jQ]依連結的檔案類型顯示圖示 的迴響

  3. 報告男丁大大~
    先感謝您網站的詳細教學:)
    不過這範例中的img src內應該是單引號@@ 您都打成雙引號了!!!Orz
    後來我是直接看網頁原始碼才發現...

  4. 老師你好，想請教一個問題
    如果想要一張圖片使用在不同的副檔名內的，是該如何進行修改呢
    比如說: doc、docx 要使用同一個圖片，xls、xlsx使用同一個圖片

    • 你可以利用 CSS Sprite 的方式來設定超連結的背景圖片, 不一定真的要插入一張真的圖片。
      請參考第三個範例~

發表迴響