用jquery事件改变 css背景图片更换不了
js:<scripttype="text/javascript">$(function(){$("#weekula").click(function(){$("#week...
js:
<script type="text/javascript">
$(function(){
$("#week ul a").click(function(){
$("#week ul a li").removeClass("onweek");
$(this).find("li").addClass("onweek");
})
})
</script>
css:
.week li { background-image:url(../images/calendar/date_nowbg.png); width:92px; height:62px; text-align:center; float:left; margin-right:9px;}
.week li:hover { background-image:url(../images/calendar/date_hoverbg.png)}
.onweek{background-image:url(../images/calendar/date_hoverbg.png)}
html:
<div class="week" id = "week">
<ul>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期一</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期二</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期三</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期四</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期五</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期六</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期日</p></li></a>
</ul>
</div>
我是要在点击li标签时把li背景图换成鼠标滑过时候的背景图 ， 怎么改变不了？求大神啊！ 展开
<script type="text/javascript">
$(function(){
$("#week ul a").click(function(){
$("#week ul a li").removeClass("onweek");
$(this).find("li").addClass("onweek");
})
})
</script>
css:
.week li { background-image:url(../images/calendar/date_nowbg.png); width:92px; height:62px; text-align:center; float:left; margin-right:9px;}
.week li:hover { background-image:url(../images/calendar/date_hoverbg.png)}
.onweek{background-image:url(../images/calendar/date_hoverbg.png)}
html:
<div class="week" id = "week">
<ul>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期一</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期二</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期三</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期四</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期五</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期六</p></li></a>
<a><li onclick = "change(this);"><p class="f12_36_cl">2014-05-17</p><p class="f14_50_c3">星期日</p></li></a>
</ul>
</div>
我是要在点击li标签时把li背景图换成鼠标滑过时候的背景图 ， 怎么改变不了？求大神啊！ 展开
4个回答
展开全部
我代码没有问题啊，我本地测试都能通过，你检查一下你图片路径是否正确。。。
<!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>
效果如下：
更多追问追答
追问
我是想让背景图片换掉 我把样式.week li （就是li的默认背景图片）注释掉的 我点击li标签就能够把点击事件里的背景图片显示出来
我是想让背景图片换掉 我把样式.week li （就是li的默认背景图片）注释掉的 我点击li标签就能够把点击事件里的背景图片显示出来
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
先确定新图片的路径及名称，然后做li的点击事件，更改当前被点击的li的背景图片为新图片，其他li的背景图片为原图片即可，代码如下：
<script type="text/javascript">
$(function(){
//编写li的点击事件
$("li").click(function(){
//设置当前被点击的li的背景图片为新图片
$(this).css("background","images/new.jpg");
//设置其他li的背景图片为原图片
$(this).siblings("li").css("background","images/old.jpg");
});
});
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把a标签全部去了, ul的子级一定是li, 你这么标签乱串是不行的, 如果你想给li加手型鼠标, 可以用css实现, 不要用空的a标签, 另外你这个change函数存在不存在, 不存在的话把onclick = "change(this);"全部删了, 既然用了jquery的click事件, 就不需要再把js事件写在html代码里
追问
这些是我先没用jquery前用的方法，都是次要的 现在我是要把功能实现出来 背景图片起冲突了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onclick = "change(this);
change()没定义
change()没定义
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
