我现在想实现的功能是有多个div,想按下上下方向键的时候,改变div的颜色,希望提供好的思路,先谢谢了,我写的onkeyup不支持。

解决方案 »

  1.   

    <!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>无标题页</title>
        <script type="text/javascript">
      window.onload=function()
      {
        document.getElementById("Text1").focus();
      }
        function ChangeColor()
        {
          var div=document.getElementById("Text1");
          var e = window.event.keyCode;
          if(e==37)
          {
            div.style.background='Red';
          }
          else if(e==38)
          {
             div.style.background='Blue';
          }
          else if(e=39)
          {
             div.style.background='Green';
          }
          else if(e==40)
          {
           div.style.background='black';
          }
        }
        </script>
    </head>
    <body>
    <div id="div1">
        <input id="Text1" type="text" value="Click Me" onkeyup="ChangeColor()" /></div>
    </body>
    </html>
      

  2.   

    这个我也会啊,现在是关键怎么在div上改变啊。
      

  3.   

    用的jQuery库<!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>test</title>
      <script src="jquery-1.4.2.js" type="text/javascript"></script>
      <script type="text/javascript">
      $(document).ready(function(){
         $(document).bind("keyup", changecolor);
      });
      
      var n = 4;
      
      function changecolor()
      {
          var kc = window.event.keyCode;
          if (kc == 37 || kc == 38) switchcolor(-1);
          if (kc == 39 || kc == 40) switchcolor(1);
      }
      
      function getcurrent() {
       for (var i=0; i<n; i++) {
       if ($("#div" + i).css("color") == "red") 
       return i;
       }
       return 0;
      }
       
      function switchcolor(d) {
       var cn = getcurrent();
       var nn = (cn + d + n)%n;
       $("#div" + cn).css("color", "black");
       $("#div" + nn).css("color", "red");
      }</script>  
    </head>
    <body><div id="div0" style="color:red;">
        div0
    </div><div id="div1">
        div1
    </div><div id="div2">
        div2
    </div><div id="div3">
        div3
    </div></body>
    </html>
      

  4.   

    这样的话一般用jquery的库比较简单用id来控制,原理和五楼一样,主要控制的是根据上下键来控制i的增加和减少来控制不同的id来上下移动