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

i don't want to use "window.location.href = 'index.html';" but want to click my navigation link using click method is it possible???

you can check here

i have created a page for keyboard navigation!

casperOne
  • 73,706
  • 19
  • 184
  • 253
teacher
  • 1,005
  • 3
  • 15
  • 27
  • 1
    Most likely the browser will block using `.click()` to navigate to a link. See http://stackoverflow.com/questions/6927215/trigger-javascript-in-href-attribute-with-jquery-click-or-similar – Digital Plane Aug 17 '11 at 16:30
  • [jKey](http://oscargodson.com/labs/jkey/) is a good place to start. – McKayla Aug 17 '11 at 16:54

4 Answers4

1

Yes, if you want to click the 'active' link then you can replace window.location.href = 'index.html' with:

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

If you simply want to map key 38 to that link then you should give the anchor an id (indexAnchor) so

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

and

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

Here is an example.

John Kalberer
  • 5,690
  • 1
  • 23
  • 27
  • you took me wrong sir thats not what i mean... i m able to find my active link but as i am pressing my keyboard key.... it is not responding me... at console.log() it gives me perfect link which i want to click.... i dn't know what is the reason.... – teacher Aug 17 '11 at 16:32
  • I am not entirely sure why, but calling click does not work. I have run into this issue before and my solution was grabbing the href attribute and setting the window's location with that value. – John Kalberer Aug 17 '11 at 16:35
  • `

    Lorem Ipsum is simply dummy text of the printing and typesetting industry.

    `     – teacher Aug 17 '11 at 16:55
  • this above script is running and making background black but links are not working.... – teacher Aug 17 '11 at 16:58
  • Is it necessary that the link is clicked and navigates to the anchor's href? If you just need to fire a click event look at Ilkka Syrjäkari's answer. – John Kalberer Aug 17 '11 at 17:04
  • i found a way around and created a post on it if you want to check you can check here...http://www.instatutorial.com/jquery-keyboard-navigation – teacher Aug 18 '11 at 07:23
0
$('html a:first').trigger('click');
max4ever
  • 11,909
  • 13
  • 77
  • 115
0

Yes, give each link an ID or class and use:

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

That will cause the link with an id of home to be clicked.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
0

$('#ID').click(); doesn't target the href in but if you've defined onclick it target's that.

so

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

will execute <a href="#" id="work" onclick="alert('test')">Test</a> the alert.

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

kile
  • 152
  • 1
  • 10
  • If you want to link it somewhere you can add onclick="location.href='url.html';" to it http://jsfiddle.net/2SKAH/7/ – kile Aug 17 '11 at 16:55
  • Check it's solution here....http://www.instatutorial.com/jquery-keyboard-navigation – teacher Aug 18 '11 at 07:24