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!

2
  • 1
    Most likely the browser will block using .click() to navigate to a link. See stackoverflow.com/questions/6927215/… Commented Aug 17, 2011 at 16:30
  • jKey is a good place to start. Commented Aug 17, 2011 at 16:54

4 Answers 4

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.

Sign up to request clarification or add additional context in comments.

6 Comments

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....
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.
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <script type="text/javascript"> $(document).ready(function() { $(document).keydown(function(e) { switch(e.keyCode) { case 38: // up arrow $("p").click(); break; } }); $("p").click(function(){ $("p").css({'background':'black'}); }); }); </script>
this above script is running and making background black but links are not working....
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.
|
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/

2 Comments

If you want to link it somewhere you can add onclick="location.href='url.html';" to it jsfiddle.net/2SKAH/7
0
$('html a:first').trigger('click'); 

Comments

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.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.