Mostrar e Esconder DIV com HTML, JavaScript e CSS
Publicado por Raimundo Alves Portela (última atualização em 15/10/2011)
[ Hits: 46.787 ]
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>
Inserindo arquivo .JS na página
tremer o browser quando o visitante acessar seu site
Script de um programa de HTML em java
Comparação entre os escalonadores BFQ e MQ-Deadline (acesso a disco) no Arch e Debian
Conciliando o uso da ZRAM e SWAP em disco na sua máquina
Servidor de Backup com Ubuntu Server 24.04 LTS, RAID e Duplicati (Dell PowerEdge T420)
Visualizar câmeras IP ONVIF no Linux sem necessidade de instalar aplicativos
Converter os repositórios Debian para o novo formato com as chaves
Instalando Spotify no Debian 13
Realizar overclock no Miyoo Mini (plus ou normal)
Direcionar uma URL para Outra No Mikrotik (2)
E aí? O Warsaw já está funcionando no Debian 13? (3)
linux mint reconhece microfone de lapela como fone de ouvido sem micro... (5)