Ae galera, blza?
Aqui vai minha primeira dica no site do Código Fonte, esta dica eu vi ajudando uma pessoa no fórum, aqui mesmo.
Nada mas é do que esconder e mostrar divs, assim economizando: tempo e espaço do seu site.
Nos exemplos estou utilizando 3 divs, com ID's diferentes.
<script>
function OpenSel(op) {
if (op == 1) {
document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";
}else if (op == 2) {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";
}else {
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";
}
}
</script>
<div id="principal">
<a href="#" onclick="OpenSel(2);">Mostrar DIV 1</a>
<br>
<a href="#" onclick="OpenSel(3);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<br><a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<br><a href="#" onclick="OpenSel(1);">VOLTAR MENU PRINCIPAL</a></div>
Outra maneira de fazer este código é utilizando CASE em javascript, veja:
<script>
function abrefecha(obj) {
switch (obj.id) {
case 'primeiro':
document.getElementById('principal').style.display="block";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="none";
break
case 'segundo':
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="block";
document.getElementById('divdois').style.display="none";
break
case 'terceiro':
document.getElementById('principal').style.display="none";
document.getElementById('divum').style.display="none";
document.getElementById('divdois').style.display="block";
break
}
}
</script>
<div id="principal">
<a href="#" id="segundo" onclick="abrefecha(this);">Mostrar DIV 1</a>
<br>
<a href="#" id="terceiro" onclick="abrefecha(this);">Mostrar DIV 2</a>
</div>
<div id="divum" style="display:none;">MOSTRAR DIV NÚMERO UM<br><a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>
<div id="divdois" style="display:none;">MORTRAR DIV NÚMERO DOIS<br><a href="#" id="primeiro" onclick="abrefecha(this);">VOLTAR MENU PRINCIPAL</a></div>
Espero que tenham gostado!
Abraços.
Meu favorito
Adicionar Artigo
