您的位置：首页 > Ajax, Tips > 使用jQuery创建个性化链接样式

使用jQuery创建个性化链接样式

发表于 01. Jun, 2009, 分类: Ajax, Tips , 4 条评论 »
标签：

在上一篇《使用CSS选择器创建个性化链接样式》中，我们使用css的选择器标签来实现相关功能。但是css 选择器虽然被绝大部分浏览器支持，但是不被该死的IE6支持，那么怎么办呢？是的，我们可以通过jQuery来实现。

还是看一下演示，点击图片可打开演示页面。

css-selectors-a

你可以看到，使用jQuery实现的样式和使用css选择器实现的一模一样，而且它在IE6中被支持。

原理是很简单的——通过jQuery的选择器来匹配相关条件，然后动态为该链接添加一个class。比如，jQuery匹配到mailto类型的链接，然后我们在该链接上添加一个mailto的class。

jQuery的属性选择器和CSS的基本一致，用法也很类似：

1

$("a[href^='mailto']").addClass("mailto");

这里就不再多介绍jQuery的属性选择器了，如果你还不了解，可以查看jQuery官方参考文档。

样式方面，我们只需将原来的选择器语法改为class就OK了。

最终的样式：

1
2
3
4
5
6
7
8
9
10
11
12

a {
background:url(a.gif) no-repeat right 4px;
padding-right:18px;color:#369;line-height:24px;
}
a.mailto{background-position:right -242px;}
a.doc{background-position:right -161px}
a.xls{background-position:right -282px}
a.pdf{background-position:right -79px}
a.mp3{background-position:right -204px}
a.swf{background-position:right -120px}
a.rar{background-position:right -38px}
a.home{background-position:right -328px}

最终的js脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13

<script type="text/javascript" src="jquery.js"></script>
<script>
  $(document).ready(function(){
    $("a[href^='mailto']").addClass("mailto");
	$("a[href$='.doc']").addClass("doc");
	$("a[href$='.mp3']").addClass("mp3");
	$("a[href$='.swf']").addClass("swf");
	$("a[href$='.rar']").addClass("rar");
	$("a[href$='.pdf']").addClass("pdf");
	$("a[href$='.xls']").addClass("xls");
	$("a[href*='qianduan.net']").addClass("home");
  });
</script>

HTML代码不需要做什么改动。看看演示。

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。
如果你喜欢本文，欢迎 订阅本站 以获得本站最新内容。

您或许也会喜欢：

4 个评论

发表评论