当前位置：首页 → 问答吧 → 请教下：鼠标点击DIV后，DIV的背景变色，这个怎么写啊？

请教下：鼠标点击DIV后，DIV的背景变色，这个怎么写啊？

时间：2010-05-27

来源：互联网

请教下：鼠标点击DIV后，DIV的背景变色，这个怎么写啊？
主要是一个页面里有几个DIV，
想实现：点击一个DIV时，该DIV的背景变颜色，然后再点击另外一个DIV，之前的DIV颜色恢复，第二个点击的DIV换背景颜色。
在网上搜到的都是点击表格的，换成DIV的后，那个JS看不懂，不晓得怎么修改，请各位大侠帮帮忙呢？谢谢了

作者: blue77 发布时间: 2010-05-27

<!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs = document.getElementsByTagName("div"); var len = divs.length; for(var i=0;i<len;i++){ divs[i].onclick = function(){ for(var j=0;j<len;j++){ divs[j].style.backgroundColor = "black"; } this.style.backgroundColor = "red"; }; } }; </script> </head> <body> <div id="div1" style="width:100px;height:100px;background:black;margin:10px;"></div> <div id="div2" style="width:100px;height:100px;background:black;margin:10px;"></div> <div id="div3" style="width:100px;height:100px;background:black;margin:10px;"></div> <div id="div4" style="width:100px;height:100px;background:black;margin:10px;"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: aolu11 发布时间: 2010-05-27

2楼的JQ可以有更简便的方法onclick="if(this.style.background-color==black){this.style.background-color=red}else{this.style.background-color=black}"

作者: cwq2jxl 发布时间: 2010-05-27

呵呵，你可以试一下，你这个能不能实现LZ的需求....

作者: aolu11 发布时间: 2010-05-27

这个代码框是不是有问题啊？把代码考到本地运行就可以看到效果了

<!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> <title>New Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <script src="http://www.or2or2.com/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <style> li{width:200px;height:30px;background:#ccc;list-style-type:none;list-style:none;margin-top:5px;padding-left:10px;font-size:12px;} li.bg{background:Red} </style> <script type="text/javascript"> $(function(){ $("#hi li").click(function(){ $(this).addClass("bg").siblings().removeClass("bg"); }) }) </script> <ul id="hi"> <li>....</li> <li>....</li> <li>....</li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 iioio 于 2010-5-27 11:25 编辑 ]

作者: iioio 发布时间: 2010-05-27

多谢2楼的，很好用，
不过有个小问题，
就是页面里的所有DIV都有那个背景色改变的功能，能不能改进一下，只加了某个ID的才有效呢？

作者: blue77 发布时间: 2010-05-27

<!DOCTYPE html> <html> <head> <script> window.onload = function(){ var divs = document.getElementById("container").getElementsByTagName("div"); var len = divs.length; for(var i=0;i<len;i++){ divs[i].onclick = function(){ for(var j=0;j<len;j++){ divs[j].style.backgroundColor = "black"; } this.style.backgroundColor = "red"; }; } }; </script> </head> <body> <div id="container"> <div style="width:100px;height:100px;background:black;margin:10px;"></div> <div style="width:100px;height:100px;background:black;margin:10px;"></div> <div style="width:100px;height:100px;background:black;margin:10px;"></div> <div style="width:100px;height:100px;background:black;margin:10px;"></div> </body> </html>
提示：您可以先修改部分代码再运行

把里面的 container 改成你的一堆<div>的父元素（容器）的id就成了

作者: aolu11 发布时间: 2010-05-27

jQuery的简单很多啊！想学 jQuery了

作者: rubyz 发布时间: 2010-05-27

多谢了

作者: blue77 发布时间: 2010-05-27

作者: gtg 发布时间: 2010-09-01