Selecionar Li para receber classe. 'efeito hover mantido'

[FaahWl 4]

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!

[paulojuchem 20]

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 4]

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 1501]

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 4]

Gente, muito obrigado!

 

Valeu mesmo, os dois me ajudaram a entender.

 

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

 

Obrigado!