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

最新推荐文章于 2025-05-21 10:36:00 发布

zailimian

最新推荐文章于 2025-05-21 10:36:00 发布

阅读量8.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： JS

本文链接：https://blog.csdn.net/xinlimian/article/details/80516821

jquery 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍如何使用jQuery监听键盘上下左右键，动态切换页面中不同类别的选中元素。示例代码展示了在不同区域（如.left, .cc, .cc1）中，根据按键方向改变元素的选中状态，实现类似导航的功能。" 89461376,5104851,XXL-JOB v2.0.2：分布式任务调度平台新特性详解,"['分布式系统', '任务调度', 'XXL-JOB', '版本更新', '优化']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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