Publicado em 26 de mar.

Selecionar Li para receber classe. 'efeito hover mantido'

Galera, boa noite!

Sou novo aqui no fórum e esse é meu primeiro post.. hehehe

Então, rodei o fórum inteiro a procura de algo que resolvesse o meu problema, mas não achei..

Após rodar o script, sempre o último ('li') recebe a classe.

Javascript:

var d = document;

window.onload = function () {
	addEventLI(d.getElementsByTagName("ul")[0]);
}

function addEventLI(objUL){
	var lis = objUL.getElementsByTagName("li");
	for ( var i = 0; i < 6; i++ ){
 alert(i);
 lis[i].onclick = function () {
 alert(i);
 lis[i].className = 'active';
 }
	}
}

Html:

<ul>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">6</a></li>
 <li><a href="#">7</a></li>
</ul>

Se alguém puder me ajudar, fico muito grato, valeeu?!

Obrigado desde já!

OBS.: Prefiro em Javascript puro, quero muito compreender bem essa linguagem para depois usar as bibliotecas.

No aguardo!

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

paulojuchem· 26 de mar.

hehe, to ligado, isso é escopo, eu criei um tópico aqui um tempo atraz e me explicaram, vou repassar:

function addEventLI(objUL){
 var lis = objUL.getElementsByTagName("li");
 for ( var i = 0; i < 6; i++ ){

 (function(i){

 lis[i].onclick = function () {
 lis[i].className = 'active';
 }

 })(i)

 }
}

a lógica é a seguinte: quando vc clica no botao, o for ja acabou, ou seja, o i vai receber o ultimo valor, sempre que vc clicar no botao, ele vai no escopo que a variavel esta(no caso o i) e ve o valor dela.

no exemplo que eu citei acima, criamos um escopo separado pra cada i e criamos a funcao dentro daquele escopo, no momento que o escopo novo foi criado, o valor do i era aquele que vc esperava

FaahWl· 26 de mar.

Amigo, muito obrigado, deu certinho.

Não entendi muito bem como funciona o programa... estou com dificuldades para zerar a classe após clicar em outro ('li').

Teria como dar mais essa ajudinha?

** Apenas uma dúvida... quando eu mudar de página, o item que está sendo setado como 'active' continuará com essa classe?

William Bruno· 26 de mar.

Ou vc pode fazer assim:

lis[i].onclick = function () {
	this.className = 'active';
}

Quando vc mudar de página, uma nova requisição http será feita, e então o javascript esvaziado, logo, o item não se manterá ativo não.

Quanto a zerar, eu faria um outro loop, apenas para isso, ficaria algo assim:

lis[i].onclick = function () {
	resetActive(lis);
	this.className = 'active';
}
function resetActive(lis){
 var max = lis.length;
 while(max--) {
 lis[max].className = '';
 }
}

Existem algumas "boas práticas" que vc pode usar, qndo tiver um tempinho, assiste esse workshop que gravei: (inicia em 14m32s)

https://www.eventials.com/pinceladasdaweb/javascript-boas-praticas-e-otimizacoes/

FaahWl· 27 de mar.

Gente, muito obrigado!

Valeu mesmo, os dois me ajudaram a entender.

Ok William, direto vejo seus posts e sempre acompanho seu website.

Obrigado!