(Resolvido) Alterar id de elemento

[FabianoM]

Boa tarde.

Bom, tenho o seguinte codigo:

<ul id="menu-dep">
    <li id="li-dep"><a href="departamento.php?dep=1" rel="history">Departamento 1</a></li>
    <li id="li-dep"><a href="departamento.php?dep=2" rel="history">Departamento 2</a></li>
    <li id="li-dep"><a href="departamento.php?dep=3" rel="history">Departamento 3</a></li>
</ul>

É o seguinte galera: preciso que ao clicar em um desses, o link clicado fique diferente dos outros, consigo fazer isso em php normalmente e através de css. Já defini, o li com id="li-dep" será o não clicado, e quando clicado esse id deve alterar para "li-selected". Não posso verificar através de php, porque estou fazendo o carregamento das páginas com ajax, então ele não realiza o refesh da mesma. Queria saber se alguém sabe de uma funcao javascript com q eu posso através do onclick chamar para alterar o ID desse meu elemento para "li-selected"?? Eu fiz algo assim chamando uma função no onclick:

document.getElementById('li-dep').setAttribute('id','li-selected);

Porém ele não muda o correto, se clico no segundo link, ele altera o primeiro, depois se clico em outro, altera o link seguinte, e no fim todos ficam alterados. Gostaria q apenas o clicado ficasse alterado, e os demais normais.

Espero ter sido claro.

Grato

[Romerito]

i aew FabianoM, só lembrando que é um erro você colocar varios campos com o mesmo id, bom tu podes fazer assim:

function muda( num )
        {
            var count = 1;
            var menu = document.getElementById( 'menu-dep' );
            
            for ( var i = 0; i < menu.childNodes.length; i++ )
            {
                if ( i % 2 )
                {
                    menu.childNodes[i].id = ( count++ == num ) ? "li-selected" : "li-dep" + count;
                    document.location.href = "departamento.php?dep=" + num;
                }
            }    
        }

e o html:

<ul id="menu-dep">
    <li id="li-dep"><a href="java script:muda(1)" rel="history">Departamento 1</a></li>
    <li id="li-dep"><a href="java script:muda(2)" rel="history">Departamento 2</a></li>
    <li id="li-dep"><a href="java script:muda(3)" rel="history">Departamento 3</a></li>
</ul>

espero que ajude, abraço!

Editado Maio 19, 2009 por Romerito

[FabianoM]

Eae cara, valeu... muitissimo obrigado, funcionou perfeitamente.

É realmente eu sei que não é o correto utilizar várias id's com mesmo nome, eu sempre utilizo classes para isso, mas não fui eu que desenvolvi, e não tinha acesso ao arquivo .css, então deixei com id mesmo.

Mas muito obrigado..

Cara, não sei quase nada de javascript, poderia me dizer o que seria esse childNodes ???

Grato

[Romerito]

vou resumir ... :P

ele vai pegar tudo que está dentro da tag ul, com id menu-dep, e você pode percorrer todos os seus filhos. ^^

ahushuahu sou péssimo pra explicar mano... :D

mas qualquer coisa olha no google. Abraço!

[FabianoM]

Já deu pra entender. :D

Novamente muito obrigado. Ajudou muito.

Abraço!

Editado Maio 19, 2009 por FabianoM