Mostrar e Esconder DIV com HTML, JavaScript e CSS
Publicado por Raimundo Alves Portela (última atualização em 15/10/2011)
[ Hits: 46.168 ]
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>
HTA - HTML Application Um exemplo com todas as propriedades
Bloqueando o teclado do visitante
Atualize suas paginas automaticamente
Tabela com efeito Hover em JavaScript
Atualizar o macOS no Mac - Opencore Legacy Patcher
Crie alias para as tarefas que possuam longas linhas de comando - bash e zsh
Criando um gateway de internet com o Debian
Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop
Aprenda a criar músicas com Inteligência Artificial usando Suno AI
Instalando e usando o Dconf Editor, o "regedit" para Linux
Como instalar o navegador TOR no seu Linux
Instalando Zoom Client no Ubuntu 24.04 LTS
Encriptografa... as particoes com LUKS, o que poderia dar errado? (0)
Qual a relevancia dos valores de bogomips com os Mhz e Ghz[DUVIDA] (2)