Mostrar e Esconder DIV com HTML, JavaScript e CSS

Publicado por Raimundo Alves Portela (última atualização em 15/10/2011)

[ Hits: 46.365 ]

Homepage: http://portelanet.com

Download abas_div.html




Apenas um exemplo de uso de div com JavaScript, HTML e CSS para mostrar e esconder o conteúdo do div.

Precisei fazer algo parecido para um sisteminha, estou postando para o aprendizado e para contribuir com o aprendizado de estão aprendendo, assim como eu.

  



Esconder código-fonte

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type= "text/css ">
div{
border: solid 2px;
width: 500px;
height: 300px;
}
</style>

<script>
function mostrar_abas(obj) {

     document.getElementById('div_aba1').style.display="none";
      document.getElementById('div_aba2').style.display="none";
      document.getElementById('div_aba3').style.display="none";
      document.getElementById('div_aba4').style.display="none";

   switch (obj.id) {
      case 'mostra_aba1':
      document.getElementById('div_aba1').style.display="block";
      break
      case 'mostra_aba2':
      document.getElementById('div_aba2').style.display="block";
      break
      case 'mostra_aba3':
      document.getElementById('div_aba3').style.display="block";
      break
      case 'mostra_aba4':
      document.getElementById('div_aba4').style.display="block";
      break
   }
}

</script>

<a href="#" onclick="mostrar_abas(this);" id="mostra_aba1" >Mostra Aba 1</a> |
<a href="#" onclick="mostrar_abas(this);" id="mostra_aba2" >Mostra Aba 2</a> |
<a href="#" onclick="mostrar_abas(this);" id="mostra_aba3" >Mostra Aba 3</a> |
<a href="#" onclick="mostrar_abas(this);" id="mostra_aba4" >Mostra Aba 4</a>
<p></p>
<!-- abas -->
<div id="div_aba1" style="display:none;">
Conteúdo da aba 1
</div>
<div id="div_aba2" style="display:none;">
Conteúdo da aba 2
</div>
<div id="div_aba3" style="display:none;">
Conteúdo da aba 3
</div>
<div id="div_aba4" style="display:none;">
Conteúdo da aba 4
</div>

Scripts recomendados

HTA - HTML Application Um exemplo com todas as propriedades

Script de um programa de HTML em java

Adicionando um texto em movimento em html

theme para fluxbox

Refresh


  

Comentários
[1] Comentário enviado por R.S.P Andre em 16/10/2011 - 04:20h

Valeu por esse código. Será de muita serventia para muitos.
Abraços..

[2] Comentário enviado por removido em 16/10/2011 - 11:34h

Gostei disso.

[3] Comentário enviado por removido em 21/12/2018 - 12:35h

e se fosse uma "class" no lugar no "id" ficaria a mesma coisa?

[4] Comentário enviado por rai3mb em 21/12/2018 - 22:34h


[3] Comentário enviado por teuzero em 21/12/2018 - 12:35h

e se fosse uma "class" no lugar no "id" ficaria a mesma coisa?


Sim, a diferença entre class e id, é que a "id" é indicada para definir unicamente um elemento no seu documento, mas a linguagem html em si não vai reclamar se vc utilizar o mesmo id em mais de um elemento.
A classe por si, define uma classe de elementos, vc pode utilizá-la com a intenção do "id", mesmo não sendo indicado em alguns casos, funciona perfeitamente.


Contribuir com comentário




Patrocínio

Site hospedado pelo provedor RedeHost.
Linux banner

Destaques

Artigos

Dicas

Tópicos

Top 10 do mês

Scripts