用jQuery控制键盘上下左右键切换选择元素

我这里写了一个上箭头的方法，其他方向以此类推；

这只是其中一种实现的方式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        .box{
            height: 600px;
            width: 1200px;
            border: 2px solid aqua;
        }
        .cc{
            width: 800px;
            float: right;
            height: 300px;
            border: 2px solid green;
        }
        .cc .dd{
            width: 120px;
            height: 300px;
            float: left;
            background: yellow;
            margin-left: 20px;
        }
        .cc1{
            width: 800px ;
            float: right;
            height: 200px;
            border:2px solid blue;
            margin-top: 50px;

        }
        .cc1 .dd1{
            width: 120px;
            height: 200px;
            float: left;
            background: red;
            margin-left: 20px;
        }
        .l{
            width: 300px;
            float: left;
            height: 600px;
            border: 2px solid red;
        }
        .li{
            height: 80px;
            background: black;
            margin-top: 30px;
        }
        .active{
            background: palegreen !important;
        }
        .top{
            width: 1200px;
            height: 200px;
            border: 2px solid aquamarine;
        }
        .tt{
            height:200px;
            background: olive;
            width: 150px;
            float: left;
            margin-left: 20px;
        }

    </style>
    <script type="text/javascript">
        $(function(){
            var jqThis;
            var len=0;
            $(window).keydown(function(e){
                console.log(e.keyCode)
                $('.ee').each(function(){
                    if($(this).hasClass('active')){
                        jqThis = $(this)
                        len = $(this).parent().find('.ee').length;
                    }
                });
  
//             上
                if(e.keyCode==38){
                    if(jqThis.parent().hasClass('l')){
                        if(jqThis.index()==0){
                            jqThis.removeClass('active')
                            jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
                        }else{
                            jqThis.prev().addClass('active')
                            jqThis.removeClass('active')
                        }
                    }
                    if(jqThis.parent().hasClass('cc')){
                        jqThis.removeClass('active');
                        jqThis.parents('.box').prev().find('.ee').eq(0).addClass('active')
                    }
                    if(jqThis.parent().hasClass('cc1')){
                        jqThis.parent().prev().find('.ee').eq(0).addClass('active')
                        jqThis.removeClass('active')
                    }
                }
            })
        })
    </script>
</head>
<body>
<div class="top">
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
    <div class="tt ee">
    </div>
</div>
<div class="box">
    <div class="l">
        <div class="li ee active" >

        </div>
        <div class="li ee">

        </div>
        <div class="li ee">

        </div>
        <div class="li ee">

        </div>
        <div class="li ee">

        </div>
    </div>
    <div class="cc">
        <div class="dd ee"></div>
        <div class="dd ee"></div>
        <div class="dd ee"></div>
        <div class="dd ee"></div>
        <div class="dd ee"></div>
    </div>
    <div class="cc1">
        <div class="dd1 ee">

        </div>
        <div class="dd1 ee">

        </div>
        <div class="dd1 ee">

        </div>
        <div class="dd1 ee">

        </div>
    </div>
</div>
</body>
</html>

用jQuery控制键盘上下左右键切换选择元素

猜你喜欢