Mostrar e Esconder DIV com HTML, JavaScript e CSS
Publicado por Raimundo Alves Portela (última atualização em 15/10/2011)
[ Hits: 46.724 ]
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>
tremer o browser quando o visitante acessar seu site
IFrame (página dentro de página)
Atualizando o Passado: Linux no Lenovo G460 em 2025
aaPanel - Um Painel de Hospedagem Gratuito e Poderoso
O macete do Warsaw no Linux Mint e cia
O que você quer para sua vida ao usar o Linux?
Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal
Dando - teoricamente - um gás no Gnome-Shell do Arch Linux
Teclado n~ao escreve abnt2 (1)
Audio intermitente xubuntu notebook positivo c14 vision (5)
Adicional de convivdado em linux somente linha de comando (2)