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!
Postado em: 13/11/2008 @ 17:11 por Guilherme Rambo. Você pode comentar ou enviar um trackback para este post.
Jhonnatan Cebidanes escreveu:
13/11/2008 @ 21:11:33Simples e eficaz! Outro dia estava com um componente java que faz isso e tem mais de 300kb!Parabens!
Abração! =D
UsandoJackson escreveu:
13/11/2008 @ 22:11:52Opa 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
UsandoMaujor escreveu:
16/11/2008 @ 21:11:53Caro 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/
Usandoinside escreveu:
16/11/2008 @ 22:11:33Muito 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
Usandojura escreveu:
20/11/2008 @ 22:11:46Tem como as abas terem formato com imagens ???
Exemplo: http://www.cssplay.co.uk/menus/overlap.html
Usandoinside escreveu:
21/11/2008 @ 11:11:25Com certeza @jura, basta usar image replacement nos links ou tags img
UsandoLúcio Kleber escreveu:
21/11/2008 @ 11:11:15Hummm, suspeito esse onClick no elemento a, não acha?
Usandoinside escreveu:
21/11/2008 @ 11:11:33@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.
Usando