Ir para conteúdo

POWERED BY:

Arquivado

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

Pauloooo

Link que abre abaixo outros links

Por , em Javascript

Recommended Posts

Pauloooo    0

Pauloooo
Postado

opa!!é o seguintegostaria de fazer um codigo que quando eu clicasse no link ele abre mais algumas links (similar a arvore de diretorios)exemplo para entender!>>site 1>>site 2>>site 3 (quando clicar no site 3 , lista abaixo mais alguns links, e quando clicar novamente ele recolhe) >>site 3.1 >>site 3.2 >>site 3.3>>site 4>>site 5como que posso fazer isso??aguardo a ajuda de vocês!!abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Primeiramente seja bem-vindo...

 

Como deve pensar e fazer:

 

Se for poucos links que fazem isso vá por essa lógica

 

-Crie uma div, com "display: none" e "id" abaixo do link desejado;

-Dentro do link faça uma função que pega como parâmetro o id da div;

-No click do link desejado você muda o "display: block" e a div aparece;

-Assim sua função fará apenas o "block" e "none" da div;

 

Qualquer dúvida poste ae...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pauloooo    0

Pauloooo
Postado

Primeiramente seja bem-vindo...

 

Como deve pensar e fazer:

 

Se for poucos links que fazem isso vá por essa lógica

 

-Crie uma div, com "display: none" e "id" abaixo do link desejado;

-Dentro do link faça uma função que pega como parâmetro o id da div;

-No click do link desejado você muda o "display: block" e a div aparece;

-Assim sua função fará apenas o "block" e "none" da div;

 

Qualquer dúvida poste ae...

fiz dessa forma... agora como que eu faço para quando clicar denovo ele voltar a ser como era??

 

 

 

<html>

<head>

<title>Untitled</title>

</head>

<script>

function Show() {

s = "<a href = \"#\">site 3.1</a><br><a href = \"#\">site 3.2</a><br><a href = \"#\">site 3.3</a><br><a href = \"#\">site 3.4</a><br><a href = \"#\">site 3.5</a><br><a href = \"#\">site 3.6</a><br><a href = \"#\">site 3.7</a><br><a href = \"#\">site 3.8</a><br><a href = \"#\">site 3.8</a><br>";

if (document.all)

geral.innerHTML=s

}

</script>

 

<body>

<a href = "#">site 1</a><br><br>

<a href = "#">site 2</a><br><br>

<a href = "#" onClick="return Show()">site 3</a><br>

<div id="geral"></div><br>

<a href = "#">site 4</a><br><br>

<a href = "#">site 5</a><br><br>

 

</body>

</html>

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Muito bem rapaz, fez certinho, tô aqui as alterações:

 

<html><head><title>Untitled</title></head><script>function Show(div) {	if(div.style.display == 'none')	{		div = div.style.display = 'block';	}	else	{		div = div.style.display = 'none';	}}</script><body><a href = "#">site 1</a><br><br><a href = "#">site 2</a><br><br><a href = "#" onClick="return Show(document.getElementById('geral'));">site 3</a><br><div id="geral" style="display: none">	<a href="\#\">site 3.1</a><br>	<a href="\#\">site 3.2</a><br>	<a href="\#\">site 3.3</a><br>	<a href="\#\">site 3.4</a><br>	<a href="\#\">site 3.5</a><br>	<a href="\#\">site 3.6</a><br>	<a href="\#\">site 3.7</a><br>	<a href="\#\">site 3.8</a><br>	<a href="\#\">site 3.8</a><br></div><br><a href = "#">site 4</a><br><br><a href = "#">site 5</a><br><br></body></html>

Continue assim...

pois muitos tem preguiça de pensar...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pauloooo    0

Pauloooo
Postado

Muito bem rapaz, fez certinho, tô aqui as alterações:

<html><head><title>Untitled</title></head><script>function Show(div) {	if(div.style.display == 'none')	{		div = div.style.display = 'block';	}	else	{		div = div.style.display = 'none';	}}</script><body><a href = "#">site 1</a><br><br><a href = "#">site 2</a><br><br><a href = "#" onClick="return Show(document.getElementById('geral'));">site 3</a><br><div id="geral" style="display: none">	<a href="\#\">site 3.1</a><br>	<a href="\#\">site 3.2</a><br>	<a href="\#\">site 3.3</a><br>	<a href="\#\">site 3.4</a><br>	<a href="\#\">site 3.5</a><br>	<a href="\#\">site 3.6</a><br>	<a href="\#\">site 3.7</a><br>	<a href="\#\">site 3.8</a><br>	<a href="\#\">site 3.8</a><br></div><br><a href = "#">site 4</a><br><br><a href = "#">site 5</a><br><br></body></html>
Continue assim... pois muitos tem preguiça de pensar...
VALEU ..VALEU MESMOMUITOS QUEREM AS COISAS NA MÃO E NEM SEMPRE É ASSIMABRAÇO!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pauloooo    0

Pauloooo
Postado

opa olha eu de novo!!!

 

o que esta acontecendo agora se a página esta com scroll ela volta para o topo subindo todo o scroll

 

para entender melhor..

 

imagine que você esta lendo este topico e clicasse aqui

 

a pagina voltaria para o topo e você teria que descer tudo de novo para ler o que queria

 

como faço para não fazer mais isso???

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

simples...

 

<a name="returnConteudo"></a><div>conteudo</div>

quando for pra atualizar é só usar:

 

location.href='#returnConteudo'

 

ok?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pauloooo    0

Pauloooo
Postado

opa entendido...só que ele perdeu o style do CSScomo faz para voltar o style, tipo quando eu passava o mouse mudava de cor.... e aumentava o tamanho..como faço para que ele volte a ter isso..ou fazer com que apareça a maozinha do link nelevaleu

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Se você colocar:

 

<a href="#" name="returnConteudo"></a>
ACHO QUE NÂO VAI FUNCIONAR, mas tente...

 

Se não crie uma classe que simula um link...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Megadeth    2

Megadeth
Postado

O melhor é fazer o que o PKTIAGO disse cria uma classe para estilizar os links.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pauloooo    0

Pauloooo
Postado

tah tudo funcionando galera!!!o pessoal de CSS me ajudou!!valeu pelo Helpabraço

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