1º Passo:
Criamos duas classes no CSS (.menuAbas e .menuAbas-sel).
estrutura.css
.menuAbas { background-image: url(imagem/bot_canalofertas_off.gif); color: #798492; }
.menuAbas-sel {background-image: url(imagem/bot_canalofertas_on.gif); color: #ffffff; }
Feito isso, vamos criar os divs com as Abas, cada div com um ID diferente mas todos com a mesma classe. Cada div representará uma Aba no site. No onClick colocamos o nome do div da Aba e o nome do div correspondente ao conteúdo que aparecerá quando for clicado. Exemplo:
arquivo.html
<div id=”Aba_1″ onClick=”AlternarAbas(Aba _1′, divAba _1′)” > Primeira Aba </div>
<div id=”Aba_2″ onClick=” AlternarAbas(Aba _2′, divAba _2)” > Segunda Aba </div>
<div id=”Aba_2″ onClick=” AlternarAbas(Aba _2′, divAba _2)” > Segunda Aba </div>
<div id=”divAba_1″ style=”display: none”> Conteúdo da primeira aba </div>
<div id=”divAba _2″ style=”display: none”> Conteúdo da segunda aba </div>
2º Passo:
Agora vamos criar o JavaScript
abas.js
<script language=”javascript” type=”text/javascript”> //inicio do JavaScript
//Função que utilizamos na hora de definir o array, para pegar o objeto
function stAba(menu,conteudo)
{
this.menu = menu;
this.conteudo = conteudo;
}
//Array com todos as abas
var arAbas = new Array();
arAbas[0] = new stAba(Aba _1′,’ divAba_1′);
arAbas[1] = new stAba(Aba _2′,’ divAba_2’);
//Função para fazer todas as abas desaparecerem e aparecer apenas a Aba selecionada
function AlternarAbas(menu,conteudo)
function AlternarAbas(menu,conteudo)
{
for (i=0;i<arAbas.length;i++)
{
document.getElementById(arAbas[i].menu).className = ‘menuAbas’;
document.getElementById(arAbas[i].conteudo).style.display = ‘none’;
}
document.getElementById(menu).className = ‘menuAbas-sel’;
document.getElementById(conteudo).style.display = ”;
}
</script>
Pronto, agora é só testar e implementar quantas abas precisar. Qualquer dúvida COMENTE.