JSFiddle - React, Tailwind, and code Playground

by rogeriolino

HTML

<div id="menu1">
    <a class="link" href="#">Link 1</a>
    <a class="link" href="#">Link 2</a>
    <a class="link" href="#">Link 3</a>
    <a class="link" href="#">Link 4</a>
    <a class="link" href="#">Link 5</a>
</div>
<div id="menu2">
    <a class="link" href="#">Link 1</a>
    <a class="link" href="#">Link 2</a>
    <a class="link" href="#">Link 3</a>
    <a class="link" href="#">Link 4</a>
    <a class="link" href="#">Link 5</a>
</div>

CSS

a { color: black; }
a:focus { color: red; }

JavaScript

$("a.link").on('keyup', function(e) {
    var current = $('a:focus');
    if (e.which == 39) {
        current.next().focus();
    }
    else if (e.which == 37) {      
        current.prev().focus();
    }
    // move to first link on previous div
    else if (e.which == 38) {
        var index = current.index() + 1;
        current.parent().prev().find('a:nth-child(' + index + ')').focus();
    }
    // move to first link on next div
    else if (e.which == 40) {
        var index = current.index() + 1;
        current.parent().next().find('a:nth-child(' + index + ')').focus();
    }
});

$("a.link:first").focus();