Stack Overflow - Link navigation ok

by HoffZ

HTML

<a id="first" href="#" class='move'>Link</a>
<a href="#" class='move'>Link</a>
<a href="#" class='move'>Link</a>

<p>Use keyboard up and down arrows to change focus</p>


<!-- JS will not work with this:

<ul>
    <li>
        <a id="first" href="#" class='move'>Link</a>
    </li>
    <li>
        <a href="#" class='move'>Link</a>
    </li>
    <li>
        <a href="#" class='move'>Link</a>
    </li>
</ul> 

-->

JavaScript

$(document).keydown(
    function(e)
    {    
        // Down key
        if (e.keyCode == 40) {      
            $(".move:focus").next().focus();   
        }
        
        // Up key
        if (e.keyCode == 38) {      
            $(".move:focus").prev().focus();   
        }
    }
);

$('.move').click(function() {
    this.focus();
});

$(function() {
    $('#first').focus(); // Init focus on first link
});