怎么点击改变标签的样式 点击其他同样标签的的时候这个样式又恢复
css:/*按星期查询*/.week{margin-top:16px}.weeka{text-decoration:none;}.weekli:hover{backgro...
css:
/*按星期查询*/
.week { margin-top:16px}
.week a{ text-decoration:none; }
.week li:hover { background-image:url(../images/calendar/date_hoverbg.png)}
.f14_50_c3{ font:14px/40px "微软雅黑"; color:#333333}
.f14_50_c3:hover{ color:#AE7629}
.f12_36_cl{ font:12px/22px "宋体"; color:#ffffff}
html:
<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>
我是要点击li改变样式，点击后把背景换成.week li:hover { background-image:url(../images/calendar/date_hoverbg.png)} 展开
/*按星期查询*/
.week { margin-top:16px}
.week a{ text-decoration:none; }
.week li:hover { background-image:url(../images/calendar/date_hoverbg.png)}
.f14_50_c3{ font:14px/40px "微软雅黑"; color:#333333}
.f14_50_c3:hover{ color:#AE7629}
.f12_36_cl{ font:12px/22px "宋体"; color:#ffffff}
html:
<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>
我是要点击li改变样式，点击后把背景换成.week li:hover { background-image:url(../images/calendar/date_hoverbg.png)} 展开
1个回答
展开全部
hover是鼠标滑过时改变样式，要实现点击改变的话可以用js或者jQuery来实现；假设点击时的样式表为a；那么给li绑定个点击事件，当li被点击时移除其他li的a样式，给当前被点击的加上a样式。大致思路就是这么的；就像这样 我点击的时候把li中的p标签的字体颜色改成红色的
<!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{color: red;}
</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>
追问
大神，我给il添加了这样一个点击事件
function change(whichLink) {
whichLink.setAttribute("class","onweek");
}
css:
.onweek{background-image:url(../images/calendar/date_hoverbg.png)}
怎么点击后还是无法添加这个背景，但是当鼠标滑过时有这个背景
追答
我刚试了一下你的代码 可以改变的啊。没有问题呢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
