js怎么实现点击下面包房为选中状态（厅的名字显示在上面，包房图片变换加深），再次点击某厅取消（厅的名字从上面取消，包房图片变换为原来未加深图片）。
1、首先输入下方的代码：
<body>
<div id="div1" style="width:100px; height:100px; background:red";></div>
</body>
<script>
var vDiv = document.getElementById('div1');
2、然后点击输入下方的代码：
oDiv.onclick=function(){
if(this.style.backgroundColor == 'red'){
this.style.backgroundColor = '#000';
}else{
this.style.backgroundColor = 'red';
}
};
</script>
3、然后这样就完成了。
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2017-09-29
你好，下面是大概的效果，不过首先，你的包房名称要是唯一的，否则下列的代码会有bug，如果name不是唯一的，我可以提供另外一种思路给你
<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="
<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>本回答被提问者采纳
<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="
<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>本回答被提问者采纳
第2个回答 推荐于2018-04-27
这个最简单的逻辑就是if判断一下就看可以了。下面是简单的例子，以变色为主，点击一下变灰色，再点击一下恢复原来的颜色。
<body>
<div id="div1" style="width:100px; height:100px; background:red";></div>
</body>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick=function(){
if(this.style.backgroundColor == 'red'){
this.style.backgroundColor = '#ccc';
}else{
this.style.backgroundColor = 'red';
}
};
</script>本回答被网友采纳
<body>
<div id="div1" style="width:100px; height:100px; background:red";></div>
</body>
<script>
var oDiv = document.getElementById('div1');
oDiv.onclick=function(){
if(this.style.backgroundColor == 'red'){
this.style.backgroundColor = '#ccc';
}else{
this.style.backgroundColor = 'red';
}
};
</script>本回答被网友采纳
第3个回答 2013-11-05
JQuery代码
$("要选的元素").toggle(
function () {
$(this).addClass("selected");//添加选中
},
function () {
$(this).removeClass("selected"); //移除选中
}
);
$("要选的元素").toggle(
function () {
$(this).addClass("selected");//添加选中
},
function () {
$(this).removeClass("selected"); //移除选中
}
);
第4个回答 2013-11-05
<div class="aa"></div>
.aa{width:100px;height:100px;background:#000000}
div.xz{ background:#ff0000}
<script language="javascript">
$(function(){
$(".aa").click(function(){
$(this).toggleClass("xz");
})
})
</script>
需要连接jq的类库追问
.aa{width:100px;height:100px;background:#000000}
div.xz{ background:#ff0000}
<script language="javascript">
$(function(){
$(".aa").click(function(){
$(this).toggleClass("xz");
})
})
</script>
需要连接jq的类库追问
解决了一部分，点击一下背景是变了。请问大侠，那个点击一下某个厅，那个厅的名字就显示在上面，我该怎么做，让它再次点击一下时，那个厅的名字就不显示在上面了。
