一排 span 都是白色背景点击的这个变红色别的还原成白色

tai_zi_ye 2011-03-18 09:50:32

一排 span 默认背景色白色
单击哪个哪个变红色背景
别的就还原为白色
我做的挨个点都变成红色的了
怎么改下
谢谢各位了

...全文

255 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

tai_zi_ye 2011-03-19

打赏
举报

怎么把代码发上去啊

xuxubaby 2011-03-19

打赏
举报



<!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=gb2312" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

  

   $(document).ready(function(){

    $("#each li").click( 

	   function() {

	            $(this).css("background","#FF0000").siblings().css("background","#ffffff"); 

       });

      

    });

    </script>



<style type="text/css">



</style>

</head>



<body>

<div id="each">

   <ul>

      <li>111111111111111111111111</li>

	  <li>222222222222222222222222</li>

	  <li>333333333333333333333333</li>

	  <li>444444444444444444444444</li>

	  <li>555555555555555555555555</li>

	  <li>666666666666666666666666</li>

	  <li>777777777777777777777777</li>

   </ul>

</div>

</body>

</html>

汉尼拔 2011-03-19

打赏
举报

[Quote=引用 6 楼 hch126163 的回复:]

<html>
<body>

</body>
<div>
<span>span1</span><span>span2</span><span>span3</span>
</div>

<script type="text/javascript">
var len = document.getElementsByTagName('span').length;
var obj……
[/Quote]

好强悍的代码

xiaosaner3 2011-03-19

打赏
举报

用 jQuery 就发现一切都简单了，嘿嘿

rainsEgo 2011-03-19

打赏
举报



<html>

  <head>

    <script type="text/javascript" src="../rains.jquery.matrix/jquery.js"></script>

    <style type="text/css">

      .red {

        background-color: red;

      }

    </style>

  </head>

  <body>

    <script type="text/javascript">

      $(document).ready(function() {

        $("span").click(function() {

            $(this).toggleClass("red");

        });

      });

    </script>

    <p>

      <span>A</span> , <span>B</span> and <span>C</span> , which you will click?

    </p>

  </body>

</html>

抱歉，第一次发帖，重复了

把addClass换成toggleClass会很好玩

rainsEgo 2011-03-19

打赏
举报

搞了半天，我给的居然是个一样的结果，气馁=。=



<html>

  <head>

    <script type="text/javascript" src="../rains.jquery.matrix/jquery.js"></script>

    <style type="text/css">

      .red {

        background-color: red;

      }

    </style>

  </head>

  <body>

    <script type="text/javascript">

      $(document).ready(function() {

        $("span").click(function() {

            $(this).addClass("red");

        });

      });

    </script>

    <p>

      <span>A</span> , <span>B</span> and <span>C</span> , which you will click?

    </p>

  </body>

</html>

潮起潮落 2011-03-19

打赏
举报

乌镇程序员 2011-03-18

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>Title</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

	<script type="text/javascript">

		$(document).ready( function() {

			$("#spans span").click( function() { $(this).css("background-color","red").siblings().css("background-color","white"); });

		});

	</script>

 </head>



 <body>

  <div id="spans">

	<span>span1</span><span>span2</span><span>span3</span>

  </div>

 </body>

</html>

乌镇程序员 2011-03-18

打赏
举报

学习了！不知道怎么样对一组元素绑定事件，jQuery可以这样做，不知道具体是怎么实现的。。
[QUOTE]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {$("#spans span").click( function() { $(this).css("background-color","red").siblings().css("background-color","white"); });});
</script>
</head>

<body>
<div id="spans">
<span>span1</span><span>span2</span><span>span3</span>
</div>
</body>
</html>
[/QUOTE]

kaifadi 2011-03-18

打赏
举报

hch126163 2011-03-18

打赏
举报

<html>
<body>

</body>
<div>
<span>span1</span><span>span2</span><span>span3</span>
</div>

<script type="text/javascript">
var len = document.getElementsByTagName('span').length;
var obj;
for( i = 0; i < len; i ++) {
document.getElementsByTagName('span')[i].onclick = function() {
if(obj)obj.style.backgroundColor = 'white';
this.style.backgroundColor = 'red';
obj=this;
};
}
</script>
</html>

kaifadi 2011-03-18

打赏
举报

[Quote=引用 4 楼 t5500 的回复:]

HTML code
<html>
<body>

</body>
<div>
<span>span1</span><span>span2</span><span>span3</span>
</div>

<script type="text/javascript">
var len = document.getElementsByTagName('span').length;
for( i ……
[/Quote]
这个我测试了OK。但是用到了2个FOR，遍历2次所有的SPAN标签，如果一个页面里有上千个这种效果，那对前端压力还是比较大的。能不能用1个FOR来实现呢？

乌镇程序员 2011-03-18

打赏
举报

<html>

<body>





</body>

<div>

<span>span1</span><span>span2</span><span>span3</span>

</div>



<script type="text/javascript">

var len = document.getElementsByTagName('span').length;

for( i = 0; i < len; i ++) {

  document.getElementsByTagName('span')[i].onclick = function() {

    for( j = 0; j < len; j ++) document.getElementsByTagName('span')[j].style.backgroundColor = 'white';

    this.style.backgroundColor = 'red';

  }

}

</script>

</html>