<style>
.listbox{
width: 200px;
border: 1px solid #777;
padding: 0;
margin: 0;
}
.item{
background: #eee;
border: 1px solid red;
list-style: none;
padding: 2px;
margin: 0;
}
.item.active{
background: red;
color: white;
}
</style>
<ul class="listbox">
<li class="item">Lorem</li>
<li class="item">Ipsum</li>
<li class="item">Lorem</li>
<li class="item">Ipsum</li>
</ul>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var $items = $('.item');
var active = 0;
document.body.focus();
$items.eq(0).addClass('active');
$(document).keydown(function(event){
if (event.keyCode == 40 || event.keyCode == 38) {
$items.eq(active).removeClass('active');
var step = {40: 1, 38: -1}[event.keyCode];
// циркулирующий инкремент/декремент
active = ($items.length + active + step) % $items.length;
$items.eq(active).addClass('active');
event.preventDefault();
}
});
</script>
