CSS | Felipe Oliveira da Silva

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=”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

//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)

{

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.

Antonio & Mario

Criando abas com Javascript

Busca

Categorias

Arquivos

Tags

Lista de links