Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 283
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Mostrar/ocultar conteúdos de divs separadas

29-08-2013 13:10

Kléber, como vai? ;)

Gostaria de saber como faço para que o "Ajuda" seja exibido e, ao ser clicado em "Info", o conteúdo do primeiro fique oculto e vice-versa, deixando o novo conteúdo visível.


<style>.oculto1,.oculto2 {display:none;background-color:red;}</style>


<script language='javascript' type='text/javascript'>   function showHide(a){ if(document.getElementById(a)){ if(document.getElementById(a+"-show").style.display!="none"){ document.getElementById(a+"-show").style.display="none"; document.getElementById(a).style.display="block" } else{ document.getElementById(a+"-show").style.display="inline"; document.getElementById(a).style.display="none"}}};   </script>


<a href="#" id="conteudo-show" onclick="showHide('conteudo');return false;">Ajuda</a><div id="conteudo" class="oculto1">Conteúdo! <a href="#" id="conteudo-hide" onclick="showHide('conteudo');return false;">[Ocultar]</a></div>   <a href="#" id="conteudo-show" onclick="showHide('conteudo');return false;">Info</a><div id="conteudo" class="oculto2">Mais conteúdo! <a href="#" id="conteudo-hide" onclick="showHide('conteudo');return false;">[Ocultar]</a></div>

Muito obrigado!
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17518
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mostrar/ocultar conteúdos de divs separadas

29-08-2013 14:44

Segue um exemplo mais prático usando jQuery

<script src="jquery.js"></script>   <script> $(document).ready(function() {   $('.div').hide();   $('.link').click(function(event) { event.preventDefault(); $('.div').hide(); $('#'+$(this).attr('ref')).show(); });   $('.fecha').click(function(event) { $(this).parent().hide(); });   }); </script>


<a href="" class="link" ref="div1">link1</a> <span class="div" id="div1">texto1 <a href="#" class="fecha">f1</a></span>   <a href="" class="link" ref="div2">link2</a> <span class="div" id="div2">texto2 <a href="#" class="fecha">f2</a></span>

0
A melhor hospedagem para o seu site HostGator!
 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 283
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Mostrar/ocultar conteúdos de divs separadas

29-08-2013 17:03

Funcionou direitinho, Kléber! Vlw! =D
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/

Quem está online

Usuários navegando neste fórum: Bing [Bot]