求一个js解决办法!点击后整行出现背景颜色,点击另一行之前的点击后的那行背景色块移除,还原原样。

粒粒澄的小宇宙 2015-09-15 09:44:14
<!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,迫于压力要做出这个效果,故来求教各位前辈,现贴出代码,求尽快解决,感谢感谢~~~~~
...全文
494 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
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>
记得把这段JS放在ul标签后面,不能放在head标签里面了,否则会失效。(ps:我不是什么大神,还是一个实习生,也才学JS1个星期,多做做就熟悉了。记得结贴给分。)
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复
引用 7 楼 lemon8687 的回复:
[quote=引用 6 楼 zpjshiwo77 的回复:] 在你想要变色的那个标签里面加上onclick="change(this)"就行了。 然后,为什么会出现你点击每一行都变色的结果,你仔细分析一下你的html,你的li标签是在<div class="gzztxx">里面的,你在点击某一行时,实际上是点击了<div>标签,并不是点击了那一行。
是的,其实就是点击最外面那个div,但是点击另一个div后,之前点过的色块还是存在,要再点击一遍才会消,咋整[/quote] 因为这个JS写的逻辑上就是这样的,点击当前元素一次,显示红色,再点击一次显示白色;你的意思是想点击当前元素(div1)一次显示红色,点击另一个元素(姑且叫div2),div2变成红色,div1变成白色是吧? 如果是这样的话,你在点击事件里面加入 先让所有元素变为初始颜色,然后再改变当前元素颜色。
  • 打赏
  • 举报
回复
引用 6 楼 zpjshiwo77 的回复:
在你想要变色的那个标签里面加上onclick="change(this)"就行了。 然后,为什么会出现你点击每一行都变色的结果,你仔细分析一下你的html,你的li标签是在<div class="gzztxx">里面的,你在点击某一行时,实际上是点击了<div>标签,并不是点击了那一行。
是的,其实就是点击最外面那个div,但是点击另一个div后,之前点过的色块还是存在,要再点击一遍才会消,咋整
zpjshiwo77 2015-09-15
  • 打赏
  • 举报
回复
在你想要变色的那个标签里面加上onclick="change(this)"就行了。 然后,为什么会出现你点击每一行都变色的结果,你仔细分析一下你的html,你的li标签是在<div class="gzztxx">里面的,你在点击某一行时,实际上是点击了<div>标签,并不是点击了那一行。
香蕉猪 2015-09-15
  • 打赏
  • 举报
回复
设置一个背景色的css,,jq获取点击行后先清除样式,,,然后附被点击对象样式。。。。
  • 打赏
  • 举报
回复
引用 2 楼 zpjshiwo77 的回复:

<!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>
引用 2 楼 zpjshiwo77 的回复:

<!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>
多些大神出手相救,但是还有个问题啊,我这有很多行,点击以后是出现了变色,但是点击每一行都变色,我想要的只是点击的那行变色,点击过后的还是能还原之前的底色。原谅我极不专业的描述,真心不懂js,求再次解救
  • 打赏
  • 举报
回复
引用 1 楼 peekding 的回复:
class="gzztxx"里面已经不是一行了,是5行。你到底想给哪行加变色?
这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行。你到底想给哪行加变色?

87,942

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧