Ir para conteúdo

POWERED BY:

Arquivado

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

Prof. Baco

Como faço para esconder ele....

Por , em Desenvolvimento frontend

Recommended Posts

Prof. Baco    0

Prof. Baco
Postado

Olá galera tudo bem? Eu tenho o seguinte código:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Div</title><script language="javascript"><!--var Aberto = ""var Fechado = ""function preload(){	if(document.images){		Aberto = new Image(16,13)		Fechado = new Image(16,13)		Aberto.src = "menos.gif"		Fechado.src = "mais.gif"	}}function mostra(item,item2){	if (item.style.display=='none'){		item.style.display='';		item2.src=Aberto.src	} else {		item.style.display='none'		item2.src=Fechado.src	}}preload();--></script></head><body><font face="Verdana" size="1" color=#000000><span id="menu1" onClick="mostra(menu1principal,menu1img)" style="cursor:hand; font-Family:Verdana; text-decoration:none; font-weight:bold; color:#000000"><img id="menu1img" src="mais.gif" valign="bottom"> Titulo 1</span><br><span id="menu1principal" style="display:'none'">     <a href=http://link1>link1</a><br></span></font> <font face="Verdana" size="1" color=#000000><span id="menu1" onClick="mostra(menu2principal,menu2img)" style="cursor:hand; font-Family:Verdana; text-decoration:none; font-weight:bold; color:#000000"><img id="menu2img" src="mais.gif" valign="bottom"> Titulo 2</span><br><span id="menu2principal" style="display:'none'">      <a href=http://link2>link2</a><br></span></font></body></html>
Mas o que eu gostaria é que quando eu clicar no TITULO 1 ele expande os sub-menus... mas na hora que clicar no TITULO 2 ele esconde o TITULO 1 e mostra o TITULO 2. E ao clicar no 1 recolher o 2 e mostra o 1. Espero que tenham estendido....

 

 

Aguardo.....

 

Baco

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Bom, primeiramente gostaria de informar que seu site está totalmente fora dos novos padrões web. A web evoluiu e a forma que você tá desenvolvendo seu site é de 1995. Estude sobre os padrões web que você verá que tá muito mais organizado e simples desenvolver um site. Leia esta sequencia aqui: http://forum.imasters.com.br/index.php?s=&...ndpost&p=536888

 

 

Agora sobre sua questão.

Pra ocultar algo, é só voce aplicar o estilo display:none ao elemento. Assim você pode fazer um javascript no onclick de cada título, que aplicará o style display:none no outro título.

Sacou?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Prof. Baco    0

Prof. Baco
Postado

Olá doutor... Desculpe a santa ignorância mas olha só. Já tem o evento onClickneles. Eu dei uma enxugada e uma melhorada no código e veja como ficou:

<html><head><title>Página de Teste</title><script language="javascript"><!--function mostra(item){	if (item.style.display=='none'){		item.style.display='';	} else {		item.style.display='none'	}}--></script></head><body><span onClick="mostra(menu1)" style="cursor:hand; font-Family:Verdana; font-size:13px">Titulo 1</span><br><span id="menu1" style="display:'none'">	 <a href="#">link 1</a><br>	 <a href="#">link 2</a><br></span><span onClick="mostra(menu2)" style="cursor:hand; font-Family:Verdana; font-size:13px">Titulo 2</span><br><span id="menu2" style="display:'none'"> 	 <a href="#">link 1</a><br>	 <a href="#">link 2</a><br>	 <a href="#">link 3</a><br>	 <a href="#">link 4</a><br></span><span onClick="mostra(menu3)" style="cursor:hand; font-Family:Verdana; font-size:13px">Titulo 3</span><br><span id="menu3" style="display:'none'"> 	 <a href="#">link 1</a><br>	 <a href="#">link 2</a><br>	 <a href="#">link 3</a><br></span></body></html>
Agora se eu clicar no 3 depois no 1 como fazer para esconder o 3 e por aí vai. Como faço para montar o script q você falou?

Peguei os links que você disse e vou dar uma estudada depois (PROMETO POIS ESTOU PRECISANDO ME ATUALIZAR) mas se for ajustar este código como vai ficar?

 

Aguardo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

A ) troque:

1) onClick por onclick (o padrão é tudo em minúsculas)

2) cursor:hand por cursor:pointer (cursor hand só funciona no IE e não é padrao)

3) mostra(menu1) por mostra('menu1') (a forma correta de encontrar elementos no documento é usando o

getElementById('id_do_elemento') )

4) display:'none' por display:none ( propriedades css só possuem aspas se for nome composto)

 

B ) leia sobre como fazer menus em http://www.maujor.com

 

C ) Coloque o doctype correto no seu documento. Assim o browser renderizará mais rápido e não no quirks mode.

 

D) Seu problema: é só você mandar sumir com os outros antes de aparecer o que foi clicado.

Coloca um display:none para os outros lá dentro da sua função javascript. Sacou?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Prof. Baco    0

Prof. Baco
Postado

HEHEHEHEH http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

micox desculpe a minha burrice.. HEHEHEHE mas não sei se está certo. Será que tem como você dá uma olhada pra mim?

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Div</title><script language="javascript"><!--function mostra(item1,item2){	if (item1.style.display=='none'){		item1.style.display='';		item2.style.display='nome';	} else {		item1.style.display='none';	}}--></script></head><body><span onclick="mostra(getElementById('menu1'),getElementById('menu2'))" style="cursor:pointer; font-Family:Verdana">Titulo 1</span><br><span id="menu1" style="display:none"><a href="#">link 1</a><br><a href="#">link 2</a><br><a href="#">link 3</a><br><a href="#">link 4</a><br></span><span onclick="mostra(getElementById('menu2'),getElementById('menu1'))" style="cursor:pointer; font-Family:Verdana"> Titulo 2</span><br><span id="menu2" style="display:none"> <a href="#">link 1</a><br><a href="#">link 2</a><br><a href="#">link 3</a><br></span></body></html>
Bem... fiz como você tinha dado as dicas mas acho q não funcionou. Tentei tirar o getElementById e ele nem chegou a expandir...

 

Aguardo suas dicas..

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

CAra, primeiramente o certo é NONE com 'N' e não NOME. haha :)

 

O seguinte, faça algo como:

function mostra(item){	//aqui, antes de tudo, coloque display:none em TODOS os seus menus.	if (item.style.display=='none'){		item.style.display='';	} else {		item.style.display='none'	}}

Lembrando que não vou te dar a resposta de mão beijada pois tá MUITO simples.

Leia minha assinatura: não dou o peixe. :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Prof. Baco    0

Prof. Baco
Postado

KAKAKAKAKAKA

 

Kra desculpe a Iginorância.... foi só trocar a letra NOME para NONE que funcionou direitinho, nem precisou pedir para eles fecharem todos como você disse.

Galera... estou postanto aki o código para que alguém (COMO EU) possa olhar isto.

Valeu MICOX. Vou postar para ajudar alguém aqui também.

 

Pode ser postado os códigos corretos?

 

Atenciosamente,

Compartilhar este post

Link para o post
Compartilhar em outros sites

Prof. Baco    0

Prof. Baco
Postado

BOM PRA QUEM GOSTARIA DE SABER COMO CRIAR MENUS COM DIV

Eu estava com dúvida em uma coisa mas o MICOX me deu altos toques. Vou postar aki pra você's verem como ficou.

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Div ESCONDIDO</title><script language="javascript"><!--function mostra(item1,item2){	if (item1.style.display=='none'){		item1.style.display='';		item2.style.display='none';	} else {		item1.style.display='none';	}}--></script></head><body><span onclick="mostra(getElementById('menu1'),getElementById('menu2'))" style="cursor:pointer; font-Family:Verdana">Titulo 1</span><br><span id="menu1" style="display:none"><a href="#">link 1</a><br><a href="#">link 2</a><br><a href="#">link 3</a><br><a href="#">link 4</a><br></span><span onclick="mostra(getElementById('menu2'),getElementById('menu1'))" style="cursor:pointer; font-Family:Verdana"> Titulo 2</span><br><span id="menu2" style="display:none"><a href="#">link 1</a><br><a href="#">link 2</a><br><a href="#">link 3</a><br></span></body></html>
Mas o java script tb pode ser modifica para este tipo (ESTE QUEM DEU A DICA FOI O MICOX)

<script language="javascript">

<!--

function mostra(item1,item2){

item1.style.display='none';

item2.style.display='none';

if (item1.style.display=='none'){

item1.style.display='';

} else {

item1.style.display='none';

}

}

-->

</script>

Valeu pela dica e está aí para quem precisar...

 

Atenciosamente...

 

Prof. Baco

Compartilhar este post

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

Informação importante

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

  Aceito