87,955
社区成员
发帖
与我相关
我的任务
分享求一个js解决办法！点击后整行出现背景颜色，点击另一行之前的点击后的那行背景色块移除，还原原样。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.gzztxx{
width:186px;
height:35px;
background:url(img/gzztxx_line.png) no-repeat bottom;
padding:0px 7px 0px 7px;
}
.gzztxx p{
font:12px"宋体";
color:#333;
line-height:35px;
float:left;
}
.gzztxx ul{
float:right;
margin-top:8px;
}
.gzztxx .gzztxx_zhuangtai li{
float:left;
padding-left:12px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="gzztxx">
<p>粤HTZ040</p>
<ul class="gzztxx_zhuangtai">
<li><img src="img/icon_fire.png" alt="火"/></li>
<li><img src="img/icon_close.png" / alt="门"></li>
<li><img src="img/icon_phone.png" alt="电话" /></li>
<li><img src="img/icon_sp.png" / alt="视频"></li>
</ul>
</div>
</body>
</html>
要给 class="gzztxx"这一整行做出一个点击后出现背景色块的效果，不仅仅是hover的短暂停留。
本人菜鸟，完全不懂js，迫于压力要做出这个效果，故来求教各位前辈，现贴出代码，求尽快解决，感谢感谢~~~~~
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.gzztxx{
width:186px;
height:35px;
background:url(img/gzztxx_line.png) no-repeat bottom;
padding:0px 7px 0px 7px;
}
.gzztxx p{
font:12px"宋体";
color:#333;
line-height:35px;
float:left;
}
.gzztxx ul{
float:right;
margin-top:8px;
}
.gzztxx .gzztxx_zhuangtai li{
float:left;
padding-left:12px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="gzztxx">
<p>粤HTZ040</p>
<ul class="gzztxx_zhuangtai">
<li><img src="img/icon_fire.png" alt="火"/></li>
<li><img src="img/icon_close.png" / alt="门"></li>
<li><img src="img/icon_phone.png" alt="电话" /></li>
<li><img src="img/icon_sp.png" / alt="视频"></li>
</ul>
</div>
</body>
</html>
要给 class="gzztxx"这一整行做出一个点击后出现背景色块的效果，不仅仅是hover的短暂停留。
本人菜鸟，完全不懂js，迫于压力要做出这个效果，故来求教各位前辈，现贴出代码，求尽快解决，感谢感谢~~~~~
...全文
请发表友善的回复…
发表回复
zpjshiwo77 2015-09-16
- 打赏
- 举报
<script type="text/javascript">
var usernameEle = document.getElementById("list1");
var childs = usernameEle.childNodes;
for (var i =1 ; i < childs.length; i+=2) {
childs[i].conunt=2;
};
function change(x){
for (var i =1 ; i < childs.length; i+=2) {
childs[i].style.backgroundColor="white";
childs[i].conunt=2;
};
if(x.conunt%2==0){
x.style.backgroundColor="red";
}
else{
x.style.backgroundColor="white";
}
x.conunt++;
}
</script>
zpjshiwo77 2015-09-15
- 打赏
- 举报
是的，其实就是点击最外面那个div，但是点击另一个div后，之前点过的色块还是存在，要再点击一遍才会消，咋整
[/quote]
因为这个JS写的逻辑上就是这样的，点击当前元素一次，显示红色，再点击一次显示白色；你的意思是想点击当前元素（div1）一次显示红色，点击另一个元素（姑且叫div2）,div2变成红色，div1变成白色是吧？
如果是这样的话，你在点击事件里面加入 先让所有元素变为初始颜色，然后再改变当前元素颜色。
[/quote]
因为这个JS写的逻辑上就是这样的，点击当前元素一次，显示红色，再点击一次显示白色；你的意思是想点击当前元素（div1）一次显示红色，点击另一个元素（姑且叫div2）,div2变成红色，div1变成白色是吧？
如果是这样的话，你在点击事件里面加入 先让所有元素变为初始颜色，然后再改变当前元素颜色。
粒粒澄的小宇宙 2015-09-15
- 打赏
- 举报
是的，其实就是点击最外面那个div，但是点击另一个div后，之前点过的色块还是存在，要再点击一遍才会消，咋整
zpjshiwo77 2015-09-15
- 打赏
- 举报
在你想要变色的那个标签里面加上onclick="change(this)"就行了。
然后，为什么会出现你点击每一行都变色的结果，你仔细分析一下你的html，你的li标签是在<div class="gzztxx">里面的，你在点击某一行时，实际上是点击了<div>标签，并不是点击了那一行。
香蕉猪 2015-09-15
- 打赏
- 举报
设置一个背景色的css,,jq获取点击行后先清除样式，，，然后附被点击对象样式。。。。粒粒澄的小宇宙 2015-09-15
- 打赏
- 举报
多些大神出手相救
，但是还有个问题啊，我这有很多行，点击以后是出现了变色，但是点击每一行都变色，我想要的只是点击的那行变色，点击过后的还是能还原之前的底色。原谅我极不专业的描述，真心不懂js，求再次解救
，但是还有个问题啊，我这有很多行，点击以后是出现了变色，但是点击每一行都变色，我想要的只是点击的那行变色，点击过后的还是能还原之前的底色。原谅我极不专业的描述，真心不懂js，求再次解救粒粒澄的小宇宙 2015-09-15
- 打赏
- 举报
这5行都在一个div里面，写成一行，要让整个这一大行点击变色
可能我表达不够
zpjshiwo77 2015-09-15
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.gzztxx{
width:186px;
height:35px;
background:url(img/gzztxx_line.png) no-repeat bottom;
padding:0px 7px 0px 7px;
}
.gzztxx
.gzztxx p{
font:12px"宋体";
color:#333;
line-height:35px;
float:left;
}
.gzztxx ul{
float:right;
margin-top:8px;
}
.gzztxx .gzztxx_zhuangtai li{
float:left;
padding-left:12px;
}
</style>
<title>无标题文档</title>
<script type="text/javascript">
var i=1;
function change(x){
if(i%2==0){
x.style.backgroundColor="red";
}
else{
x.style.backgroundColor="white";
}
i++;
}
</script>
</head>
<body>
<div class="gzztxx" onclick="change(this)">
<p>粤HTZ040</p>
<ul class="gzztxx_zhuangtai">
<li><img src="img/icon_fire.png" alt="火"/></li>
<li><img src="img/icon_close.png" / alt="门"></li>
<li><img src="img/icon_phone.png" alt="电话" /></li>
<li><img src="img/icon_sp.png" / alt="视频"></li>
</ul>
</div>
</body>
</html>
peekding 2015-09-15
- 打赏
- 举报
class="gzztxx"里面已经不是一行了，是5行。你到底想给哪行加变色？
