如何使用 jquery 进行键盘导航？

Question

        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
        <meta name="author" content="bbbbb" />

        <title>Untitled 2</title>
        <script type="text/javascript" src="js/jquery-1.5.1.js"></script> 

    <style>
    #test ul{list-style:none;}
    #test li{width:75px;height:25px;padding-left:25px;padding-right:25px;padding-top:10px;padding-bottom:10px;}
    .active{background:#AEABAB;}
    a.active{color:#ffffff;}
    </style>
    </head>

    <body>


<script type="text/javascript">
$(document).ready(function() 
{ 
      $(document).keydown(function(e) {
    switch(e.keyCode) {
    case 38: // up arrow
    window.location.href = 'index.html';
    break; 
    }
    });
});
</script>
<div id="test">
<ul>
    <li class="active"><a  href="test.html">Home</a></li>
    <li><a  href="#">My work</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">News</a></li>
</ul>
</div>
</body>
</html>

我不想使用"window.location.href = 'index.html';" 但是想用点击方法点击我的导航链接可以吗？？？

你可以在这里查看

我创建了一个键盘导航页面！

Answer 1

是的，如果您想单击“活动”链接，则可以将 window.location.href = 'index.html' 替换为：

window.location.href = $("li.active a").attr('href');

如果您只是想将该链接的 map 密钥 38 设置为该链接，那么您应该给锚点一个 id (indexAnchor) 所以

<a id="indexAnchor" href="text.html">Home</a>

和

window.location.href = $("#indexAnchor").attr('href');

这是一个例子。

Answer 2

$('html a:first').trigger('click');

Answer 3

是的，给每个链接一个 ID 或 class 并使用：

case 38: //Up arrow
$('#home').click();

这将导致点击带有home id 的链接。

Answer 4

$('#ID').click(); 不以href为目标，但如果您定义了 onclick 它的目标就是那个。

所以

$(document).ready(function() { 
    $(document).keydown(function(e) {        
    switch(e.keyCode) {
    case 38: // up arrow
        $('#work').click();
        break; 
    }
    });    
});

将执行<a href="#" id="work" onclick="alert('test')">Test</a>警报。

http://jsfiddle.net/2SKAH/6/

如何使用 jquery 进行键盘导航？

问题描述

4 个解决方案

解决方案1
1 2011-08-17 16:21:31

解决方案2
0 2011-08-17 16:21:18

解决方案3
0 2011-08-17 16:21:23

解决方案4
0 已采纳 2011-08-17 16:51:46

如何使用 jquery 进行键盘导航？

问题描述

4 个解决方案

解决方案1 1 2011-08-17 16:21:31

解决方案2 0 2011-08-17 16:21:18

解决方案3 0 2011-08-17 16:21:23

解决方案4 0 已采纳 2011-08-17 16:51:46

解决方案1
1 2011-08-17 16:21:31

解决方案2
0 2011-08-17 16:21:18

解决方案3
0 2011-08-17 16:21:23

解决方案4
0 已采纳 2011-08-17 16:51:46