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

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

解决方案 »

  1.   

    <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>
      

  2.   

          这个我测试了OK。但是用到了2个FOR，遍历2次所有的SPAN标签，如果一个页面里有上千个这种效果，那对前端压力还是比较大的。能不能用1个FOR来实现呢？
      

  3.   

    <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>
      

  4.   

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

  5.   

    <!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>
      

  6.   

    搞了半天，我给的居然是个一样的结果，气馁=。=[code]
    <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>
    [/code]
      

  7.   


    <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会很好玩
      

  8.   


    <!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>
      

  9.   

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