Mostrar e Esconder DIV com HTML, JavaScript e CSS
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.
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.
Descrição
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.
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>
Abraços..