Bom, a forma mais simples que eu imaginei é manter o contador da posição atual e ir regredindo ou aumentando de acordo com o click.
Vamos por partes:
Em primeiro lugar, teremos o nosso contador que inicialmente terá o valor de 0. Ele será o responsável para mostrar a posição do link atual.
Em segundo lugar, temos que obter todos os links. Para isso eu utilizei o querySelectorAll(). A escolha foi porque eu quero evitar os elementos responsáveis por "mudar" a paginação, ou seja, as setinhas. Para remover as setas, adicionei a classe .seta
nesses elementos e no selector, basta utilizar o :not()
, desta forma:
var links = document.querySelectorAll('a:not(.seta)');
Existem outras opções de fazer isso, como adicionar a classe somente na lista, utilizar o primeiro e último elemento e o que mais desejar. Fiz somente um exemplo que acho mais didático.
Feito isso, já temos a posição inicial e até onde ele poderá percorrer (links.length
).
O próximo passo é criar a função responsável por mudar o link ativo, que é o motivo real da pergunta.
Para isso, eu criei a função mudaSeta()
, que é responsável por alterar a posição da classe ativo. Essa alteração será feita em 3 etapas. Verificar o lado que deverá percorrer, remover a classe ativa do anterior e adicionar no novo elemento.
Para verificar o lado eu adicionei um parâmetro lado na função mudaSeta()
. Dessa forma eu adiciono esse parâmetro ao chamar a função. Para ser mais fácil exemplificar, os parâmetros são e e d (esquerda e direita). Assim, na função eu verifico para qual lado que eu irei. Se for para a esquerda, eu removo 1 do contador se for para a direita, eu adiciono. Esse valor removido ou adicionado é o valor referente a posição do link na página (aquela variável link que definimos no início (var link
)).
A função mudaLado()
ficou da seguinte forma:
function mudaSeta(lado) {
if (lado == 'e') {
if (contador > 0) {
links[contador].classList.remove("ativo");
contador--;
links[contador].className += " ativo";
}
} else {
if (contador < links.length - 1) {
links[contador].classList.remove("ativo");
contador++;
links[contador].className += " ativo";
}
}
console.log(contador)
}
Note que eu apenas verifico o lado, faço uma verificação condicional para verificar se não está no último elemento e subtraio ou acrescento 1 no contador. Após isso, basta obter o elemento pela posição e adicionar a classe ativo. Mas especificamente, desta forma:
//Removo a classe do elemento anterior
links[contador].classList.remove("ativo");
//Adiciono ou subtraio 1 do contador
contador--;
//Adiciono a classe ativo no novo elemento
links[contador].className += " ativo";
Os comentários acima explicam melhor o que disse.
Como já falei demais, veja o exemplo abaixo, creio que será mais simples entender.
var contador = 0;
var links = document.querySelectorAll('a:not(.seta)');
function mudaSeta(lado) {
if (lado == 'e') {
if (contador > 0) {
links[contador].classList.remove("ativo");
contador--;
links[contador].className += " ativo";
}
} else {
if (contador < links.length - 1) {
links[contador].classList.remove("ativo");
contador++;
links[contador].className += " ativo";
}
}
console.log(contador)
}
.ativo {
color: red;
}
a:hover {
color: red;
}
.seta {
cursor: pointer;
}
<a class="seta" onclick="mudaSeta('e')">«</a>
<a class="ativo">1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
<a class="seta" onclick="mudaSeta('d')">»</a>