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.

• Download abas_div.html
• Enviar nova versão

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>

tremer o browser quando o visitante acessar seu site

TABELA DE CORES

Bola que pula

Refresh

Barras coloridas