用jquery来为链接添加效果

最新推荐文章于 2022-02-10 10:38:07 发布

最新推荐文章于 2022-02-10 10:38:07 发布 · 180 阅读

文章标签：

#jQuery #CSS #JavaScript #HTML #ViewUI

html/css/js 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用jQuery简化网页中不同类型的链接（如电子邮件、外部链接和锚点链接）样式的技巧。通过简单的几行代码，可以为这些链接添加特定的背景图片，并设置统一的内边距，使页面更加整洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[url]http://oopstudios.com/dlink/index.html[/url] 这个玩意有点意思,不过jqueyr做起来更方便.

js :

$(document).ready(function(){
	$("a[href^='mailto']").addClass("email")
	$("a[href^='http']").not("[href*=mysite]").addClass("external")
	$("a[href^='#']").addClass("anchor");
});

css :

a.external{
	background: url("../images/external.png") no-repeat top right;
	padding-right: 15px;
}

a.email{
	background: url("../images/eml.png") no-repeat top right;
	padding-right: 18px;
}

a.anchor{
	background: url("../images/anc.png") no-repeat top right;
	padding-right: 18px;
}