Mostrar e Esconder DIV com HTML, JavaScript e CSS
Publicado por Raimundo Alves Portela (última atualização em 15/10/2011)
[ Hits: 46.108 ]
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>
Adicionando wallpaper em sua página
Inserindo arquivo .JS na página
Melhorando o tempo de boot do Fedora e outras distribuições
Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46
E a guerra contra bots continua
Tradução do artigo do filósofo Gottfried Wilhelm Leibniz sobre o sistema binário
Conheça o firewall OpenGFW, uma implementação do (Great Firewall of China).
Instalando o FreeOffice no LMDE 6
Anki: Remover Tags de Estilo HTML de Todas as Cartas
Colocando uma opção de redimensionamento de imagem no menu de contexto do KDE
Problema com alias usando locate (2)
Criar uma base de reconhecimento de HW no VOL (9)
[Shell Script] Script para desinstalar pacotes desnecessários no OpenSuse
[Shell Script] Script para criar certificados de forma automatizada no OpenVpn
[Shell Script] Conversor de vídeo com opção de legenda
[C/C++] BRT - Bulk Renaming Tool
[Shell Script] Criação de Usuarios , Grupo e instalação do servidor de arquivos samba