jQuery实现样式化不同的类型的超级链接,绝大多数的浏览器,样式化链接选择器很简单,比如说:样式化一个.pdf链接,你只需简单如此写CSS选择器:a[href $=’.pdf’]{……}。不幸的是,IE6不支持这种选择器(这也是我们讨厌IE的又一个原因!)。但是可以运用jQuery修补这个问题。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery实现样式化不同的类型的超级链接</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/Common/js/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://www.veryhuo.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(http://www.veryhuo.com/uploads/allimg/091221/file-red.gif) no-repeat; padding-left: 16px; } a.zip { background: url(http://www.veryhuo.com/uploads/allimg/091221/file-orange.gif) no-repeat; padding-left: 16px; } a.psd { background: url(http://www.veryhuo.com/uploads/allimg/091221/file-blue.gif) no-repeat; padding-left: 16px; } a.external { background: url(http://www.veryhuo.com/uploads/allimg/091221/window.gif) no-repeat; padding-left: 16px; } </style> </head> <body> <p> <p><a href="http://www.veryhuo.com/uploads/soft/logo.pdf">PDF file</a> (logo.pdf)</p> <p><a href="http://www.veryhuo.com/uploads/soft/logo.psd">PSD file</a> (logo.psd)</p> <p><a href="http://www.veryhuo.com/uploads/soft/logo.zip">Zip file</a> (logo.zip)</p> <p><a href="#anchor">链接</a></p> <p><a href="http://www.veryhuo.com">网页教程</a> (http://www.veryhuo.com)</p> <p><a href="http://bbs.liehuo.net">站长论坛</a> (http://bbs.liehuo.net)</p> <p><a href="http://tool.liehuo.net">网站工具</a> (http://tool.liehuo.net)</p> </p> </body> </html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示:可修改后代码再运行! 文章导航 上下左右无缝隙鼠标放上停止的滚动代码点击消失文本块 简单而带有幻影效果