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';"但是想用点击方法点击我的导航链接是否可能???

you can check here

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

Answer 1

是的，如果您想点击“有效”链接，那么您可以将window.location.href ='index.html'替换为：

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

如果您只是想将键38映射到该链接，那么您应该给锚一个id（indexAnchor）所以

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

和

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

Here就是一个例子。

Answer 2

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

Answer 3

是的，为每个链接提供ID或类，并使用：

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 个答案: