js，jquery:图片，单击一下选中，再单击一下取消选中
要实现：绿框，红框，灰框这三个框，可以点击0个或者1个。均不点击的时候显示所有内容，点击一个时显示相关内容。而且，三个框均为点击一下为选中，再点击一下则取消选中，而且选中...
要实现：绿框，红框，灰框这三个框，可以点击0个或者1个。均不点击的时候显示所有内容，点击一个时显示相关内容。而且，三个框均为点击一下为选中，再点击一下则取消选中，而且选中和取消选中时框的颜色会有变化（换框的图片就行）
展开
2个回答
展开全部
刚写的，采纳呗!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>点击显示</title>
</head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".title li i").click(function(){
if($(this).hasClass("on")){
$(this).removeClass("on");
}else{
$(this).addClass("on");
}
$(".content li").hide();
$(".title li i").each(function(index, element) {
if($(this).hasClass("on"))$(".content ."+$(this).attr("name")).show();
});
})
})
</script>
<style>
ul,li{list-style:none;}
.title li{ cursor:pointer;width:150px;overflow:hidden;margin:3px 0;}
.title li i{float:right}
.title li i.red,.red{border-color:#CC7166;color:#CC7166;}
.title li i.red.on{border-color:#F30;}
.title li i.green,.green{border-color:#9FE6AA;color:#9FE6AA;}
.title li i.green.on{border-color:#393;}
.title li i.gray,.gray{border-color:#999;color:#999;}
.title li i.gray.on{border-color:#666;}
.title li i{border:2px solid;width:70px;height:15px;display:inline-block}
.content li{float:left;margin-right:10px;border:1px solid;}
</style>
<body>
<ul class="title">
<li>运行/激活<i class="red" name="red"></i></li>
<li>执行失败<i class="green" name="green"></i></li>
<li>未激活<i class="gray" name="gray"></i></li>
</ul>
<ul class="content">
<li class="red">运行/激活内容。。。。。。。。。。。。。</li>
<li class="green">执行失败内容。。。。。。。。。。。。。</li>
<li class="gray">未激活内容。。。。。。。。。。</li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
