Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoM

[Resolvido] Alterar id de elemento

Por , em Javascript

Recommended Posts

FabianoM    0

FabianoM
Postado

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, pq estou fazendo o carregamento das páginas com ajax, entao ele nao realiza o refesh da mesma. Queria saber se alguem sabe de uma funcao javascript com q eu posso através do onclick chamar para alterar o ID desse meu elemento para "li-selecte"??

 

Espero ter sido claro.

 

Grato

Compartilhar este post

Link para o post
Compartilhar em outros sites

hantaro    1

hantaro
Postado

è ate melhor voce fazer isso com class, mas não sei qual a necessidade ai do seu sistema, entao pra fazer com id voce faz assim:

 

document.getElementById('id atual').setAttribute('id','id que voce quer');

Testei aqui no FF3 e IE8

Compartilhar este post

Link para o post
Compartilhar em outros sites

webmind    5

webmind
Postado

boa tarde

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function mudar_id_li(objet,href){

temp=objet;
objet.id="li-selected";
alert("O id da sua li foi alterado para: "+objet.id)

//pode seguir tb a hiperligacao atraves do parametro 2

window.location=href;

//developed by webmind
}
</script>
</head>

<body>
<ul>
<li id="li-dep" class=""><a href="java script:mudar_id_li(this,'#')" rel="history">Departamento 1</a></li>
<li id="li-dep" class=""><a href="java script:mudar_id_li(this,'#')" rel="history">Departamento 2</a></li>
<li id="li-dep" class=""><a href="java script:mudar_id_li(this,'#')" rel="history">Departamento 3</a></li></ul>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoM    0

FabianoM
Postado

Valeu aos dois, ambos alteraram...

 

Só mais uma coisinha...é q sei muito pouco de javascript...

 

Ali tipo se seleciono um item, ele fica selecionado, ai seleciono outro, ele fica selecionado tbm.. Tem alguma forma de fazer, para somente o q foi clicado na hora ficar selecionado, e oq foi clicado antes, voltar para li-dep??

 

obrigadão!

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoM    0

FabianoM
Postado

Mais uma coisa, ali no exemplo do webmind, ele altera o id da tag a href... como posso fazer pra alterar o id da tag li??

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoM    0

FabianoM
Postado

Eae galera.

 

Consegui resolver meu problema, pesquisando e com bastante ajuda, entao posto aqui minha solução caso alguém futuramente tenha o mesmo problema que eu tive:

 

O correto seria ter feito com classe, mas eu nao tinha o css pra alterar...Entao ficou mais ou menos 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";
					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>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito