Days ago I asked a question about how to add a class to an element when clicking the button , the answers were satisfactory (I did using JQuery as me
sessionStorage.removeItem('Contar');
function AddClass(id){
//pega o valor do botao
var tipo = document.getElementById(id).value;
//pegar o item da lista
var iten = document.getElementsByTagName('li');
//cria uma sessão para gravar os valores dos cliques
if(typeof(Storage)!=="undefined"){
if(sessionStorage.Contar){
if(tipo == 'proximo'){
sessionStorage.Contar=Number(sessionStorage.Contar)+1;
if(sessionStorage.Contar == iten.length){
sessionStorage.Contar=5;
}
}else
if(tipo == 'anterior'){
sessionStorage.Contar=Number(sessionStorage.Contar)-1;
if(sessionStorage.Contar == 0){
sessionStorage.Contar=0;
}
}
}else{
sessionStorage.Contar=0;
}
}
//resgata o valor da sessão
var valor = sessionStorage.Contar
if(tipo == 'proximo'){
if(valor > 0){
//remove a classe do item anterior
iten.item(valor-1).removeAttribute('class');
}
}else
if(tipo == 'anterior'){
if(valor < 5){
//remove a classe do item anterior
iten.item(valor+1).removeAttribute('class');
}
}
//adiciona classe ao próximo item
iten.item(valor).setAttribute('class', 'selected');
}
My html is this:
<button onClick="AddClass('anterior');" id="anterior" value='anterior'>anterior</button>
<button onClick="AddClass('proximo');" id="proximo" value='proximo'>proximo</button>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
I did not post on JSFidle because on my machine the site is getting all bugged as you can see on this link