Mostrar e Esconder DIV com HTML, JavaScript e CSS
Publicado por Raimundo Alves Portela (última atualização em 15/10/2011)
[ Hits: 46.510 ]
Homepage: http://portelanet.com
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.
<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>
IFrame (página dentro de página)
Passkeys: A Evolução da Autenticação Digital
Instalação de distro Linux em computadores, netbooks, etc, em rede com o Clonezilla
Título: Descobrindo o IP externo da VPN no Linux
Armazenando a senha de sua carteira Bitcoin de forma segura no Linux
Enviar mensagem ao usuário trabalhando com as opções do php.ini
Instalando Brave Browser no Linux Mint 22
vídeo pra quem quer saber como funciona Proteção de Memória:
Encontre seus arquivos facilmente com o Drill
Mouse Logitech MX Ergo Advanced Wireless Trackball no Linux
Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil
PC não liga no filtro de linha (3)
Desde que seja DDR3, posso colocar qualquer memória? (3)
Instalar sem formatar, pergunta meio boba. [RESOLVIDO] (7)
Curso gratuito Defesa de redes 10ª Maratona CiberEducação Cisco Brasil... (0)