这个应该怎么实现呢？

在网页里我放了一个表格，表格的单元格中放图片，我想实现的效果是：通过按键盘的方向键，将焦点移动到制定位置，并且图片突出显示，不知道怎么实现，谢谢。

解决方案 »

  1.   

    通过键盘事件监听按键，再然后通过tabIndex来移动，图片突出显示用css实现。。
      

  2.   

    table.onkeyup=function(){
    在这里判断keyCode,并操作
    }
      

  3.   

    思路有了还不会写。。<html>
    <head>
    <script src="jquery.js"></script>
    <style>
    td div{
    border: 1px solid red;
    width: 50px;
    height: 50px;
    }
    td.highlight div {
    background-color: yellow;
    }
    </style>
    </head>
    <body>
    <table>
    <tbody>
    <tr>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    </tr>
    <tr>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    </tr>
    <tr>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    </tr>
    <tr>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    <td><div></div></td>
    </tr>
    </tbody>
    </table>
    <script>
    var $td = $('table').find('td').first().addClass('highlight');
    $(document).keypress(function(event){
    switch(event.keyCode){
    case 37:
    if($td.prev().length !== 0){
    $td = $td.removeClass('highlight').prev().addClass('highlight');
    }
    break;
    case 38:
    var $tr = $td.parent().prev();
    if($tr.length !== 0){
    var index = $td.index();
    $td.removeClass('highlight');
    $td = $tr.children().eq(index).addClass('highlight');
    }
    break;
    case 39:
    if($td.next().length !== 0){
    $td = $td.removeClass('highlight').next().addClass('highlight');
    }
    break;
    case 40:
    var $tr = $td.parent().next();
    if($tr.length !== 0){
    var index = $td.index();
    $td.removeClass('highlight');
    $td = $tr.children().eq(index).addClass('highlight');
    }
    break;
    }
    });
    </script>
    </body>
    </html>
    给分吧同学。。
      

  4.   

    上面有点笔误，最好把keypress换成keyup
      

  5.   

    这样可能网页会刷新,,用ajax实现吧