Navegação entre elementos (próximo anterior)

[Henrique Zanini 0]

Boa tarde, estou quebrando a cabeça para fazer isso a dias e não acho solução. Gostaria de criar uma navegação dinâmica de próximo, anterior quando o usuário utilizar setas do teclado.

 

 

Meu html está da seguinte forma:

    <ul>
    	<li><a class="ativa">botao 1</a></li>
    	<li><a>botao 2</a></li>
    	<li><a>botao 3</a></li>
    	<li><a>botao 4</a></li>
    </ul>

O que eu estou tentando fazer, é o usuário apertar para a direita, a classe ativa, passar para o botao 2. Se ele apertar a seta da esquerda, ela voltar para o botão 1.

 

Tentei da seguinte forma para ir para o próximo:

var $this = $('a.ativo');

$this.parents('ul').find('li').next().find('a:not(.ativo)');

O problema que está forma me retorna todos que não estão com a classe .ativo, e não somente o próximo (ou anterior) ao elemento :(

[William Bruno 1501]

É mais simples vc fazer isso pelo index do elemento.

O primeiro é o 0, depois o 1.

 

Vc pega o índice atual, e soma um. Caso seja o último (quantidade de elementos), ai vc volta para o 0.