18 de ago de 2009

Simples Menu Abas - JavaScript


Imagem de como fica:

JavaScript:
function show(item,items){
items++;
for( x = 1 ; x < items; x++ ){>
document.getElementById('Tab'+x).className = 'Aba';
}
document.getElementById('Tab'+item).className = 'AbaOn';
for(x=1;x
document.getElementById('Content'+x).style.display = 'none';
}
document.getElementById('Content'+item).style.display = 'block';
}

HTML:

<div class="AbaOn" id='Tab1' onclick="javascript:show(1,3);">Aba 1</div>
<div class="Aba" id='Tab2' onclick="javascript:show(2,3);">Aba 2</div>
<div class="Aba" id='Tab3' onclick="javascript:show(3,3);">Aba 3</div>
<BR>
<div Id="Content1" class='ContentMenuOn'>
aaaaaa
</div>
<div Id="Content2" class='ContentMenu'>
bbbbbbbbb
</div>
<div Id="Content3" class='ContentMenu'>
cccccccccccccc
</div>

CSS:
.Aba{
width:150px;
float:left;
text-align:center;
cursor:pointer;
border:1px solid #888888;
border-bottom:0px;
height:25px;
margin-top:5px;
background-color:#e0e0e0;
}
.AbaOn{
width:150px;
float:left;
text-align:center;
cursor:pointer;
border:3px double black;
border-bottom:0px;
height:30px;
background-color:white;
}
.ContentMenu{
display:none;
border:3px double black;
padding:7px;
}
.ContentMenuOn{
display:block;
border:3px double black;
padding:7px;
}


Ok, só isso.

Abraço

5 comentários:

  1. Oi Me ajuda eu quero um blog parecido com o seu!!! por favor me ajuda a adicionar essas abas que o sr. colocou! =D

    ResponderExcluir
  2. Boa noite @Jornal, perdão mas não entendi ao certo que que quis dizer.
    Que um blog, e quer usar essa abas no blog? Ou vai usa-las em outro lugar?

    abraço

    ResponderExcluir
  3. EXCLUI ESSA MERDA DE POST!

    ResponderExcluir