求一个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，迫于压力要做出这个效果，故来求教各位前辈，现贴出代码，求尽快解决，感谢感谢~~~~~

...全文

525 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变成白色是吧？如果是这样的话，你在点击事件里面加入先让所有元素变为初始颜色，然后再改变当前元素颜色。

粒粒澄的小宇宙 2015-09-15

打赏
举报

引用 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获取点击行后先清除样式，，，然后附被点击对象样式。。。。

粒粒澄的小宇宙 2015-09-15

打赏
举报

引用 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，求再次解救

粒粒澄的小宇宙 2015-09-15

打赏
举报

引用 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行。你到底想给哪行加变色？

web前端综合笔试题.docx

通过以上示例和解释，我们可以看到CSS为实现表格行选中效果提供了丰富的样式定制能力。无论是使用伪类:hover和:focus来简单模拟交互效果，还是通过更复杂的选择器来选择特定行，亦或是结合JavaScript或jQuery来动态控制样式，CSS都能帮助我们达到目的。需要注意的是，CSS的使用应与HTML结构紧密结合，并且在不同的浏览器中可能需要适当的兼容性处理。在下一章中，我们将进一步深入到JavaScript和jQuery事件监听与处理的世界，以完成表格行选中的动态交互部分。

JavaScript 是一个事件驱动(Event-driven)的语言，当浏览器载入网页开始读取后，虽然马上会读取JavaScript 事件相关的代码，但是必须要等到「事件」被触发(如使用者点击、按下键盘等)后，才会再进行对应代码段的执行。事件的本质是程序各个组成部分之间的一种通信方式，也是异步编程的一种实现。事件：特定的时间节点发生的一些动作（行为），一旦动作发生或会触发一些操作。

border不仅是一个装饰性属性，更是构建UI语义的重要工具。在微信官网的设计中，轻微的边框常用于区分模块区域、突出输入框状态或增强按钮的点击感知。例如，在“下载二维码”模块中，二维码图片外围通常添加一圈浅灰色边框以增强视觉隔离感：逐行解读：设置单像素实线边框，颜色接近背景灰阶，避免突兀；圆角处理符合微信整体圆润风格；提供内部留白，使二维码与边框保持安全距离；确保容器包裹内容而不独占整行；box-shadow添加轻量投影，进一步强化层次感。

HTML表格通过

和	等标签构建行、列与表头结构，形成语义清晰的数据展示框架。在DOM中，每个表格元素均可被JavaScript访问与操作，实现动态内容更新。通过原生JS可获取表格节点并调用其方法，为后续增删改查功能奠定基础。是原生 JavaScript 中用于创建任意 HTML 元素节点的核心方法。相较于和这类专用于表格的操作 API，提供了更强的灵活性和控制力，尤其适用于需要插入包含输入框、下拉菜单、按钮或其他复杂控件的表格行场景。 JavaScript 87,996 社区成员 224,693 社区内容发帖与我相关我的任务分享确定社区描述 Web 开发 JavaScript 社区管理员加入社区获取链接或二维码近7日近30日至今加载中查看更多榜单社区公告暂无公告试试用AI创作助手写篇文章吧 + 用AI写文章

和

等标签构建行、列与表头结构，形成语义清晰的数据展示框架。在DOM中，每个表格元素均可被JavaScript访问与操作，实现动态内容更新。通过原生JS可获取表格节点并调用其方法，为后续增删改查功能奠定基础。是原生 JavaScript 中用于创建任意 HTML 元素节点的核心方法。相较于和这类专用于表格的操作 API，提供了更强的灵活性和控制力，尤其适用于需要插入包含输入框、下拉菜单、按钮或其他复杂控件的表格行场景。