如果需要使用Jquery修改CSS网页背景样式。用户可以这样写$(‘p’).css({"background-image":"url(../images/msg_btn.gif"})
Jquery-CSS用法
css() 方法返回或设置匹配的元素的一个或多个样式属性。返回第一个匹配元素的 CSS 属性值。注释:当用于返回一个值时,不支持简写的 CSS 属性(比如 "background" 和 "border")。
参考资料:JQuery
更换背景图片有两种方式:1、直接给元素附加css,因为js附加的css样式要比css中的样式权限高,那么js设置的背景图片就会覆盖之前的图片
$(this).css("background","url(1.jpg) no-repeat 0 0")
2、写两个class,一个class里面写一个背景图片,js中操作的话直接改变元素的class就可以了
$(this).removeClass('classA').addClass('classB')
相对而言,第二种方式更好一点,实现了js中尽量不书写css的理念,同时第二种可以实现背景图片不断替换,而第一种不行
我代码没有问题啊,我本地测试都能通过,你检查一下你图片路径是否正确。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
/*按星期查询*/
.week { margin-top:16px}
.week a{ text-decoration:none }
.week li:hover { color: #abc}
.f14_50_c3{ font:14px/40px "微软雅黑" color:#333}
.f14_50_c3:hover{ color:#AE7629}
.f12_36_cl{ font:12px/22px "宋体" color:#fff}
.a{background-image: url(images/1.png)}
</style>
<script>
$(function(){
$("#week ul a li").click(function(){
$("#week ul a li p").removeClass("a")
$(this).find("p").addClass("a")
})
})
function change(i){
}
</script>
</head>
<body>
<div class="week" id = "week">
<ul>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期一</p></li></a>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期二</p></li></a>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期三</p></li></a>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期四</p></li></a>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期五</p></li></a>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期六</p></li></a>
<a class="m"><li onclick = "change(this)"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期日</p></li></a>
</ul>
</div>
</body>
</html>
效果如下: