怎么点击改变标签的样式 点击其他同样标签的的时候这个样式又恢复

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)}
展开
 我来答
帐号已注销
推荐于2016-02-08 · TA获得超过313个赞
知道小有建树答主
回答量:712
采纳率:0%
帮助的人:384万
展开全部

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)}
怎么点击后还是无法添加这个背景,但是当鼠标滑过时有这个背景
追答
我刚试了一下你的代码 可以改变的啊。没有问题呢
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式