js怎么实现点击下面包房为选中状态（厅的名字显示在上面，包房图片变换加深），再次点击某厅取消（厅的名字从上面取消，包房图片变换为原来未加深图片）。
<html>
<head>
<title>zhong</title>
<style type="text/css">
#divName { height:100px; }
#divName label { display:inline-table; height:20px; line-height:20px; margin:0 5px; }
.divImgIn { width:100px; height:100px; background:blue; color:#000; }
.divImgOut { background:green; }
</style>
</head>
<body>
<div id="divName">
</div>
<div>
<div class="divImgIn" name="广州">广州</div>
<div class="divImgIn" name="上海">上海</div>
<div class="divImgIn" name="深圳">深圳</div>
</div>
</body>
</html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 为 class = divImgIn 的控件绑定 click 事件
$(".divImgIn").click(function() {
// 使用 toggleClass ，如果 class 中没有 divImgOut 则附加上，有则减掉
$(this).toggleClass("divImgOut");
// 获得当前的 class ，要么是 divImgIn ，要么是 divImgIn divImgOut
var css = $(this).attr("class");
// 获得点击的房子的 name 属性
var name = $(this).attr("name");
// 这个逻辑判断根据你的需求写
if (css != "divImgIn") {
// 这句是加上一个label
$("#divName").append($("<label name='" + name + "'>" + name + "</label>"));
} else {
// 这句是删除 label 中 name = name 的
$("#divName").find("label[name='" + name + "']").remove();
}
})
})
</script>