Menu em abas com jQuery

View Comments

• Muito legal! Já tinha visto o artigo no sreencaster mas ainda não consegui resolver o meu problema. Preciso de um menu em abas como esse mas tem que haver quebra de linha no texto da aba, so que dai não consigo deixar o css no jeito. Tem como ou teria que usar outra alternativa ao href?

  Obrigado pela atenção,
  Gustavo Ferreira.

• Se eu passo o valor de ancora /#aba5 no link, ele imediatamente deveria abrir a aba 5, certo? Por que isto não funciona?

• Jaydson
  Bem observado.
  Contudo, pelo fato de uma biblioteca facilitar determinada tarefa não significa que devemos usá-la.
  Antes de tudo é preciso analisar se vale a pena carregar a biblioteca para cumprir a tarefa.
  Dependendo do projeto é mais vantagem desenvolver um script personalizado.
  No caso do menu em abas, se jQueryUI vai ser carregada somente para simplificar a implementação do menu no site, então é melhor usar um script como o mostrado na matéria.

• Acho interessante mostar para o pessoal iniciante como fazer um menu em tabs, porém acho útil ressaltar que esta funcionalidade já existe na jQuery UI.
  É bem simples de implementar, simples mesmo:

  $("#tabs").tabs();

  Pronto. Com isso ta feito o menu em abas.

  http://jqueryui.com/demos/tabs/

• Cara, eu sou seu maior fan, suas dicas de CSS me ajudaram bastante, você foi sem saber um dos melhores professores que já tive, muito obrigado mesmo.

  Abraço

• Tem como fazer este mesmo tipo de efeito sem jquery, só em javascript mesmo. Eu consegui algo próximo, porém não funciona.

• Estou começando no ramo da web, mas por que admiro e amo a criação de sites, estou pela primeira vez agradecendo e parabenizando
  o Maurício pelo excelente trabalho, e pelos seus tutoriais maravilhosos
  nunca fiz um curso, porém com os tutoriais produzido pelo Maurício consegui desenvolver algum simples sites e abriu minha visão a ".css"
  agora estou tentando o css + java script , hoje tentei pela primeira vez aquele menu com abas e nao consegui mas vou tentar mas, mais tarde tento de novo leio com mais atenção,
  Parabéns pelo trabalho e essa força que voçê nos da com seus tutoriais, recomendo a todos.
  So peço uma coisa, eu sou do recife tenho 18anos admiro seus trabalhos e gostaria de comprar uns livros desses do maujor e gostaria de saber se não teria alguma revendedora por aqui pelo recife, e algum amigo seu que de aula de TI pois estou ansioso para começar e preciso de uma recomendação, Thx

• Olá amigos,
  Realmente a biblioteca facilitou e simplificou muito a vida dos designers que se interessam por javascript não obstrusivo.

  Parabéns pelo artigo !

• Grato, Maurício, pelo esclarecimento.

  [ ]s

• @Jura
  Sim, as abas podem ser figuras tal como se constroem abas com CSS e figuras sem jQuery.

  @Francisco
  A linha que você tem dúvida destina-se a fechar uma aba aberta quando o usuário clica para abrir outra e diz o seguinte:

  Encontre o elemento ancestral (parents) cuja ID é container_abas do link clicado (a) e selecione seus filhos (children) com a classe (.aba:visible ou seja as abas abertas) e esconda-os (hide())