Olá! Sunday, 17 de December de 2017.



Dicas CódigoFonte.net
Wednesday, 20 de February de 2008

Esconder e Mostrar DIV's

Ae galera, blza?

Aqui vai minha primeira dica no site do Código Fonte, esta dica eu vi ajudando uma pessoa no fórum, aqui mesmo.
Nada mas é do que esconder e mostrar divs, assim economizando: tempo e espaço do seu site.

Nos exemplos estou utilizando 3 divs, com ID's diferentes.

  1. <script>
  2. function OpenSel(op) {
  3.  
  4. if (op == 1) {
  5. document.getElementById('principal').style.display="block";
  6. document.getElementById('divum').style.display="none";
  7. document.getElementById('divdois').style.display="none";
  8. }else if (op == 2) {
  9. document.getElementById('principal').style.display="none";
  10. document.getElementById('divum').style.display="block";
  11. document.getElementById('divdois').style.display="none";
  12. }else {
  13. document.getElementById('principal').style.display="none";
  14. document.getElementById('divum').style.display="none";
  15. document.getElementById('divdois').style.display="block";
  16. }
  17. }
  18. </script>
  19. <div id="principal">
  20. <a href="#" onclick="OpenSel(2);">Mostrar DIV 1</a>
  21.  
  22. <a href="#" onclick="OpenSel(3);">Mostrar DIV 2</a>
  23. </div>
  24. <div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>
  25. <div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>


Outra maneira de fazer este código é utilizando CASE em javascript, veja:

  1. <script>
  2. function abrefecha(obj) {
  3.  
  4. switch (obj.id) {
  5. case 'primeiro':
  6.  
  7. document.getElementById('principal').style.display="block";
  8. document.getElementById('divum').style.display="none";
  9. document.getElementById('divdois').style.display="none";
  10.  
  11. break
  12. case 'segundo':
  13.  
  14. document.getElementById('principal').style.display="none";
  15. document.getElementById('divum').style.display="block";
  16. document.getElementById('divdois').style.display="none";
  17.  
  18. break
  19.  
  20. case 'terceiro':
  21.  
  22. document.getElementById('principal').style.display="none";
  23. document.getElementById('divum').style.display="none";
  24. document.getElementById('divdois').style.display="block";
  25.  
  26. break
  27. }
  28. }
  29. </script>
  30. <div id="principal">
  31. <a href="#" id="segundo" onclick="abrefecha(this);">Mostrar DIV 1</a>
  32.  
  33. <a href="#" id="terceiro" onclick="abrefecha(this);">Mostrar DIV 2</a>
  34. </div>
  35. <div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>
  36. <div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>


Espero que tenham gostado!

Abraços.

Enviado por: Andre

Comentários do artigo [Novo comentário]

Hussein Mohamad - 15 de February de 2012 - 16:35
É possivel utilizar este cógio referenciando as div por class ao invés do id ? Tipo <div class="divum"> ao invés de <div id="divum">
pois eu irei utilizar este código dentro de um laço. Agradeço se possivel responder.
João Schiavon - 19 de July de 2016 - 19:45
Gostaria muito de agradecer o apoio, esta rotina resolveu um problema que me chateava no meu site, agora fiquei feliz com o resultado. Fico grato por ter dividido o seu conhecimento. Sucesso!
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010