jQuery实现样式化不同的类型的超级链接

发布时间：2018-08-24 13:15 所属栏目：121 来源：站长网

导读：jQuery 实现样式化不同的类型的超级链接，绝大多数的浏览器，样式化链接选择器很简单，比如说：样式化一个.pdf链接，你只需简单如此写CSS选择器：a[href $=.pdf]{}。不幸的是，IE6不支持这种选择器（这也是我们讨厌IE的又一个原因！）。但是可以运用jQuery

　　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>
提示：可修改后代码再运行!

（编辑：ASP站长网）