HTML JQUERY实现UL/LI上的向下箭头_Jquery_Html

HTML JQUERY实现UL/LI上的向下箭头

jquery html

HTML JQUERY实现UL/LI上的向下箭头,jquery,html,Jquery,Html,这是一个简单的要求，我不能让它工作我只想使用箭头键在一个列表中导航。我还想检测何时在LI上按下箭头键。但是，我无法使用箭头导航-我的keydown事件也不会触发 <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).read

这是一个简单的要求，我不能让它工作

我只想使用箭头键在一个列表中导航。我还想检测何时在LI上按下箭头键。但是，我无法使用箭头导航-我的keydown事件也不会触发

       <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("li,a").keydown(function () {
                    alert("kd");
                });
            });
        </script>
    </head>
    <body>



<div>
        <input type="text" />
        <ul id="sbOptions_54514054" class="sbOptions" style="">
            <li><a href="#-1" rel="-1">--Select one--</a></li>
            <li><a href="#2" rel="2">Windows</a></li>
            <li><a href="#1" rel="1">Siding</a></li>
            <li><a href="#7" rel="7">Roofing</a></li>
        </ul>
    </div>


$（文档）.ready（函数（）{
$（“li，a”）.keydown（函数（）{
警报（“kd”）；
});
});






像这样的东西怎么样
基本上，它维护一个简单的索引，其中当前选择了列表项。向上和向下箭头键绑定到keydown事件，如果有人按下列表顶部的向上箭头，则顶部项目保持选中状态，反之亦然
var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
});

var selected=“”；
$（文档）.keydown（函数（e）{//38向上，40向下
如果（e.keyCode==40）{
如果（已选择==“”）{
选择=0；
}如果（（选择+1）<$（'li'）。长度）{
选择++；
}
$（'li'）.removeClass（'selected'）；
$（'li:eq（'+selected+'））.addClass（'selected'）；
返回false；
}
如果（e.keyCode==38）{
如果（已选择==“”）{
选择=0；
}否则，如果（选择>0）{
选择--；
}
$（'li'）.removeClass（'selected'）；
$（'li:eq（'+selected+'））.addClass（'selected'）；
返回false；
}
});
像这样的东西怎么样
基本上，它维护一个简单的索引，其中当前选择了列表项。向上和向下箭头键绑定到keydown事件，如果有人按下列表顶部的向上箭头，则顶部项目保持选中状态，反之亦然
var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
});

var selected=“”；
$（文档）.keydown（函数（e）{//38向上，40向下
如果（e.keyCode==40）{
如果（已选择==“”）{
选择=0；
}如果（（选择+1）<$（'li'）。长度）{
选择++；
}
$（'li'）.removeClass（'selected'）；
$（'li:eq（'+selected+'））.addClass（'selected'）；
返回false；
}
如果（e.keyCode==38）{
如果（已选择==“”）{
选择=0；
}否则，如果（选择>0）{
选择--；
}
$（'li'）.removeClass（'selected'）；
$（'li:eq（'+selected+'））.addClass（'selected'）；
返回false；
}
});
如何在li
上按箭头键？li中有链接。因此，我可以单击并关注链接（a）。我需要做的是从一个链接向下箭头指向另一个链接，并添加一个向下键如何在li
上按箭头键？li中有链接。因此，我可以单击并关注链接（a）。我需要做的是从一个链接到另一个链接，并添加一个向下键。你能在这个链接上添加一个功能，使它在按下向下键时滚动吗？你能在这个链接上添加一个功能，使它在按下向下键时滚动吗？