Home » jQuery 應用

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

範例 1
範例 2
沒錯!只要 300 元就能獲得我們團隊完整的協助,讓效果能迅速的整合到您的網站,並保證瀏覽器的相容性。
立刻申請!

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

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

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

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]依連結的檔案類型顯示圖示 的迴響

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

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

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

發表迴響