给指定的链接通过JavaScript代码添加动态样式，非常Cool
查看演示页面 View Demo 查看全部代码 View Code
第一步：
点击这里下载全部源代码及相关资源
第二步：
在网页<head>区添加以下代码
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a[@href$=pdf]").addClass("pdf");
$("a[@href$=zip]").addClass("zip");
$("a[@href$=psd]").addClass("psd");
$("a:not([@href*=http://sharejs.com])").not("[href^=#]")
.addClass("external")
.attr({ target: "_blank" });
});
</script>
<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
color: #999999;
}
a {
color:#333399;
}
a:hover {
text-decoration: none;
}
a.pdf {
background: url(images/file-red.gif) no-repeat;
padding-left: 16px;
}
a.zip {
background: url(images/file-orange.gif) no-repeat;
padding-left: 16px;
}
a.psd {
background: url(images/file-blue.gif) no-repeat;
padding-left: 16px;
}
a.external {
background: url(images/window.gif) no-repeat;
padding-left: 16px;
}
</style>
第三步：
在网页<body>区添加以下代码
<p> <p><a href="http://sharejs.com/file/wdw-logo.pdf">PDF 文件</a> (wdw-logo.pdf)</p> <p><a href="http://sharejs.com/file/wdw-logo.psd">PSD 文件</a> (wdw-logo.psd)</p> <p><a href="http://sharejs.com/file/wdw-logo.zip">Zip 文件</a> (wdw-logo.zip)</p> <p><a href="#anchor">#anchor link</a> (#anchor)</p> <p><a href="http://sharejs.com">分享JavaScript</a> (http://sharejs.com)</p> <p><a href="http://share.sharejs.com">JavaScript</a> (http://www.sharejs.com)</p> <p><a href="http://www.sharejs.com">返回主页</a> (http://www.sharejs.com)</p> </p>
