jquery怎么给div下的a标签添加背景图片?
1个回答
展开全部
<!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=utf-8" />
<title>显示背景</title>
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$.each($("#PagingView a"),function(index,item){
switch($(item).text()){
case "First":
$(item).css({"color":"#ff0","background":"url(logo.png)"});
break;
case "Next":
$(item).css({"color":"#f00","background":"url(logo.png)"});
break;
case "Last":
$(item).css({"color":"#0f0","background":"url(logo.png)"});
break;
}
});
});
</script>
</head>
<body>
<div id="PagingView" style="width:500px; height:500px">
<a href="javascript:;" style="height:100px; width:100px; display:block;">First</a>
<a href="javascript:;" style="height:100px; width:100px; display:block;">Next</a>
<a href="javascript:;" style="height:100px; width:100px; display:block;">Last</a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示背景</title>
<script type="text/javascript" src="http://www.sz886.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$.each($("#PagingView a"),function(index,item){
switch($(item).text()){
case "First":
$(item).css({"color":"#ff0","background":"url(logo.png)"});
break;
case "Next":
$(item).css({"color":"#f00","background":"url(logo.png)"});
break;
case "Last":
$(item).css({"color":"#0f0","background":"url(logo.png)"});
break;
}
});
});
</script>
</head>
<body>
<div id="PagingView" style="width:500px; height:500px">
<a href="javascript:;" style="height:100px; width:100px; display:block;">First</a>
<a href="javascript:;" style="height:100px; width:100px; display:block;">Next</a>
<a href="javascript:;" style="height:100px; width:100px; display:block;">Last</a>
</div>
</body>
</html>
追问
那我想隐藏文字,只留图片呢。而且只显示一个图,而不是重复填满
追答
把 代码改为这个就可以了 $(item).css({"color":"#ff0","background":"url(logo.png) no-repeat"}).text("");
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询