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.
05 de janeiro de 2009 às 15:00
Caso eu queira mudar a forma de abas para vertical e não horizontal é só mudar o CSS? O Javascript continua sendo o mesmo?
05 de janeiro de 2009 às 16:20
Exatamente! O Javascript é o mesmo mude apenas o CSS
13 de maio de 2009 às 15:41
Remover ou inserir uma nova linha de abas é so criar mais div id="divAba _-numero-" e formatar o css???
???
14 de maio de 2009 às 16:00
Cristiano,
Basta adicionar o div "<div id="Aba_numero": para aba e o div <div id="divAba_numero"> para o conteúdo.
Tem que adicionar essa quantidade de abas no JS, exemplo:
arAbas[numero] = new stAba(Aba _numero´,´ divAba_numero´);
abs,
Felipe
15 de agosto de 2009 às 23:17
cara e como eu faria para poder duplicar varias sem dar erro?? tipo eu tenho um site de animes, e dae precisava das abas por causa das qualidades dos videos e dae preciva de uma que desse para duplicar sem dar erro??
15 de agosto de 2009 às 23:25
Oi Kelvyn,
Para você inserir novas abas é só adicionar no menu e o div de conteudo.
E tb declacar no JS exemplo:
arAbas[0] = new stAba(Aba _1′,’ divAba_1′);
arAbas[1] = new stAba(Aba _2′,’ divAba_2’);
arAbas[2] = new stAba(Aba _3′,’ divAba_3’);
arAbas[3] = new stAba(Aba _4′,’ divAba_4’);
27 de setembro de 2010 às 18:09
Criei as abas para cadastrar vários estabelecimentos!
Os menus se repetiram em cada nome cadastrado. O problema é só o primeiro menu obedece. Ou seja se eu clicar na aba do estabelecimento D vou para o Estabelecimento A (que é o primeiro). sempre vai para as informações do primeiro. Tem como arrumar isso? Ficou muito confuso? rs
12 de novembro de 2010 às 09:39
Felipe,
obrigado pela post.
muito bom!
11 de abril de 2011 às 20:17
Ei alguém pode me ajudar? Eu fiz a abas javascript e deu certo, mas antes disso, tinha um efeito light box com umas imagens tbm em javascript, ai quando eu inclui o jquery.js, meu lightbox deu erro, quando tiro o jquery ai a função da abas que da erro. Como resolve isso?
11 de abril de 2011 às 20:17
Ei alguém pode me ajudar? Eu fiz a abas javascript e deu certo, mas antes disso, tinha um efeito light box com umas imagens tbm em javascript, ai quando eu inclui o jquery.js, meu lightbox deu erro, quando tiro o jquery ai a função da abas que da erro. Como resolve isso?
12 de abril de 2011 às 19:27
Resolvi meu problema sozinho , o fato de ter 2 biblioteca Javascript , elas entraram em conflito. Para arruma isso :
http://imasters.com.br/artigo/13871/jquery/evitando_conflitos_com_jquerynoconflict/
31 de agosto de 2011 às 20:49
Boa Noite!
Adoro o post é muito bom!
Eu sou bem leiga sobre Javascript Mysql, eu tenho que criar um projeto escola, onde tem a classe aluno, classe professor, classe prova,assim o professor realiza as provas com perguntas com 4 alternativa e fornece a resposta, isso fica no BD. To meio sem saber por onde começa, mais o que gostaria de pergunta é como que eu faço pra conectar, ja abaixei o mysql-connector-java-5.1.17.
Obrigada.
21 de setembro de 2011 às 20:12
Onde inserir o js e tem como colocar imagem no lugar do texto como o “título” da aba?
21 de setembro de 2011 às 20:20
Consegui colocar imagens como titulo da aba, mas nao consegui fazê-lo funcionar!
21 de setembro de 2011 às 21:07
olhe como está o html
aaaa
Qualidade:
Altíssima
Uploader:
Legenda: Português
Tamanho:
Qualidade:
Alta
Uploader:
Legenda: Português
Tamanho:
Qualidade:
Média
Uploader:
Legenda: Português
Tamanho:
Qualidade:
Baixa
Uploader:
Legenda: Português
Tamanho:
<
21 de setembro de 2011 às 21:08
Não foi o HTML!
