Como eu gosto de jQuery: é tão simples fazer as coisas com ele! Segue então um código prontinho pra quem deseja montar um menu em abas, o código está o mais simples possível, e claro que está desta forma para ser postado no blog, para usar num site seria legal tornar este javascript não-obstrutivo e remover algumas repetições no código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Menu em abas simples</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> var tabAtual = 1 mudarTab = function(numeroTab) { $("#tab_"+tabAtual).toggle() $("#tab_"+numeroTab).toggle() tabAtual = numeroTab } </script> </head> <body id="index"> <div id="tabs"> <a href="#tab_1" onclick="mudarTab(1)">Tab 1</a> <a href="#tab_2" onclick="mudarTab(2)">Tab 2</a> <a href="#tab_3" onclick="mudarTab(3)">Tab 3</a> <a href="#tab_4" onclick="mudarTab(4)">Tab 4</a> <div id="tab_1">conteudo tab 1</div> <div id="tab_2" style="display:none">conteudo tab 2</div> <div id="tab_3" style="display:none">conteudo tab 3</div> <div id="tab_4" style="display:none">conteudo tab 4</div> </div> </body> </html> |
É só isso, basta rodar que o código já funciona. Com um pouco de CSS e outras personalizações você faz um ótimo menu em abas com pouco código.
Até mais!
Simples e eficaz! Outro dia estava com um componente java que faz isso e tem mais de 300kb!Parabens!
Abração! =D
Opa Guilherme.
Com certeza a jQuery é o framework do século..hehehe. Utilizo em todos os projetos e cada vez mais me apaixono pela simplicidade dela.
Postei tbm alguns artigos sobre jQuery. Dê uma avaliadinha e se tiver sugestões, serão bem vindas.
Abraço
Caro Guilherme,
Inspirado nesta matéria desenvolvi uma versão estilizada, acessível e não obstrutiva do menu de abas “mamão com açúcar”.
A idéia de usar como link um fragmento identificador terminado com um número é muito interessante e facilita fazer a seleção com jQuery retendo o índice do elemento clicado. Foi assim que fiz.
Grato por compartilhar.
A versão que desenvolvi encontra-se: http://www.livrojquery.com.br/temp/abas/
não achei interessante do Maujor, pois ao clicar no menu some no topo
Muito interessante sua versão Maujor. A propósito, parabéns pelo livro. Vou te confessar que eu e meu colega estávamos interessados em escrever sobre o assunto, afinal não tínhamos conteúdo de qualidade no nosso idioma sobre jQuery, mas você chegou na frente, escrevendo seu livro.
Abraço
Tem como as abas terem formato com imagens ???
Exemplo: http://www.cssplay.co.uk/menus/overlap.html
Com certeza @jura, basta usar image replacement nos links ou tags img
Hummm, suspeito esse onClick no elemento a, não acha?
@lúcio Acho sim, disse no post que o código está obstrutivo, esse click deveria ser atribuído via javascript e não direto no HTML.
Ola cara, legal esse menu, bom minha duvida é a seguinte, porque por exemplo se na aba 1 e na 2 eu tenho algum conteudo que faz uso da Jequery ele nao funciona(o que ta dentro da div da aba) ele somente funciona na primeira aba, eh como se nas seguinte ele nao carregase a Jquery… o que pode ser isso ??? Obrigado e parabens pelo blog.
Édipo, existe se não me engano uma função do jQuery que serve para carregar scripts js assincronamente, dê uma olhada na documentação
O problema do Édipo, creio, parece com o que sofri.
Ao trabalhar com abas que já tenham seu conteúdo renderizado na tela, mesmo que o conteúdo das outras abas esteja escondido, seus códigos estão na tela. A função só funciona em uma das abas e nas demais não pois se você estiver usando a mesma chamada de função js para as abas haverá conflito. A solução que encontrei não foi das mais ideais, mas me ajudou: fiz funções nomeadas para cad aba, apesar de muito parecidas e fugir do sentido de reaproveitamente de código.
Se alguém tiver alguma solução para isso, evitando que eu tenha 6 abas e cada qual com sua função e todas as 6 funções muito parecidas, quando na verdade poderia ter somente uma….também agradeceria…
era exatamente isso q eu precisava
Ola pessoal tudo bem,
Estou aqui para pedir uma ajuda…. e o seguinte..
Esses sitema de aba e show de bola, pois a unica coisa q esta contecendo e a seguinte, estou fazendo uma aplicacao em PHP, e o conteudo do meio é include, pois quando clico nos link para mudar o conteudo do meio ele perde a referencia da aba, alguem teria uma solucao para isso, pois eu não estou utilizando div na mesma pagina e sim um include q chama a outra página….
me ajudem por favor
PERFEITO!
muito bom cara! simples e objetivo! Agora é só eu fazer um css pra ficar bunitnho rs parabens
Fala galera, blz?!
Sou iniciante em web e estou desenvolvendo um site pra um camarada. Testei esse código antes de inseri-lo na estrura do site e funciono lindamente! Mas qdo passei pro html do site ele não funciona. Simplesmente ele não alterna as abas.
No mesmo html tem um “script” de um banner, será que é isso que não está deixando ele funfa??
Valeu!!!!
Pode ser que o outro script esteja entrando em conflito com o das abas. Poste sua dúvida em algum fórum de javascript para ter auxílio, eu recomendo o fórum imasters: forum.imasters.com.br
Muito bom, aliás isso tudo só ta chegando pra agilizar e deixar a web mais organizada, efeitos bacanas.
Abss