Nesta pequena série de aulas irei ensinar para vocês como criar um sistema de navegação em abas usando jQuery e CSS. Tudo muito simples e de fácil entendimento para que todos possam acompanhar o assunto.
Dividi as aulas em 3 partes para ficar mais prático e objetivo. Depois de assistir não deixe de praticar o que foi ensinado e deixar seu comentário contando o que achou das aulas.
Script usado:
$(document).ready(function() {
//Quando carregar a pagina
$(".conteudo").hide(); //esta primeira linha servir para esconder as divs do contedo
$("ul.menu li:first").addClass("active").show(); //Ativar primeira aba
$(".conteudo:first").show('slow'); //abre a pagina suavemente
//On Click Event
$("ul.menu li").click(function() {// quando clicar no link do menu ir executar a seguinte funo:
$("ul.menu li").removeClass("active"); //remove a class no link clicado para que no fica marcado
$(this).addClass("active"); //adiciona a classe no link clicado para que o usuario saiba em qual link ele esta
$(".conteudo").hide(); //esconder as divs do contedo
var activeaba = $(this).find("a").attr("href"); //Encontrar o valor do atributo rel para identificar a aba que esta ativa + contedo
$(activeaba).fadeIn('slow'); //efeito de fade in com o contedo ativo
return false;// o returno falso evita que ao clicar no link a pgina role para o topo.
});
});
Sou desenvolvedor web, amante de tecnologia, gosto de disseminar conhecimento através de vídeo aulas e artigos.
Atualmente temos 18 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.
Muito obrigado, me ajudou muito!
ResponderParabéns por compartilhar o seu conhecimento nesse portal.
Tenho acompanhado as videos aulas mas não encontrei o link para download dos arquivos da video aula. Tem como disponibilizar .
At+
Responderexcelente video, um passo a passo bem auto explicativo, valeu. Só estou com duvida sobre os arquivos jquery..., não manjo muito e não estou conseguindo puxar o arquivo abas.js, pois as divs não estão sumindo. Vou estudando pra resolver isso, mas se tiver alguma dica fico agradecidissimo
Responderok, usei os scripts hospedado direto no diretório e funcionou, muito bom, estou tentando agora implementa-lo blog wordpress com um loop de posts para cada categoria(duas categorias uma em cada aba), se alguem tiver alguma indicação de como fazer essa implementação agradeço muito
ResponderParabéns,muito bom.
continue assim.
Parabéns pelas vídeo aulas, tem como voce upar o arquivo dos scripts e imagens da video aula? Eh bom para acompanhar.
Valew
ResponderParabéns pelas vídeo aulas
foi muito util no desenvolvimento de um site para o meu trabalho..
Obrigada,
Continue assim
ResponderParabéns pela video aula, muito bem detalhada e consegui fazer direitinho,na verdade errei algumas coisinhas tipo 'aspas simples' onde deveria colocar "aspas duplas",comi uns pontos e virgulas(;) mas faz parte pra quem ta aprendendo.
Mais uma vez obrigado Roberto Perreira pelo tempo dedicado.
Um forte abraço!
Olá colega parabéns pelos seus belíssimos posts, tenho aprendido e eusado muitas idéias suas no meu Blog, obrigado por compartilhar o seu conhecimento.
Grande abraço!
ResponderMuito boa a video aula,você explica muito bem,mas acho que você precisa se soltar mais exemplo:parece que a cada três palavras tem 1000 pontos entende.Mas o resto ta tudo beleza,adorei a video aula,tive alguns probleminhas mas nada que não consegui resolver.Espero mais aulas suas até mais.
Responderso nao consequir acompanha a parte que vc coloca o jquery abas onte ta esse script
ResponderFala Marcos Antonio, tudo bem contigo?
Primeiro gostaria de agradecer as palavras de incentivo, são os comentários e as críticas, que nos animam a cada jornada, melhorar a didática e o aperfeiçoamento do conteúdo na Rbtech
Coincidência ou não, a aula de " Criando menus accordion com jQuery ", já esta saindo forno, logo após esta vídeo aula , Veja a imagem em gif: http://i56.tinypic.com/24niujd.gif, a sua aula ja esta agendada.
Forte abraço
ResponderOlá Roberto Pereira, é minha primeira visita ao site, e pelo que vi até agora, será a primeira de muitas, gostei muito do conteúdo, meus parabéns pelo belíssimo trabalho. Sabe, quando procuramos por esse tipo de conteúdo na net, muitas vezes nos deparamos com muita coisa ruim, sem profissionalismo, sem nexo, que ao invéz de ajudar acaba atrapalhando no aprendizado, o que não é o caso desse site. Aproveitando, gastaria de saber se aqui tem algo referente a menus accordion com jQuery, se tiver me indique, se não, fica um pedido. E mais uma vez, meus parabéns.
ResponderMatheus Felipe obrigado pelo comentario, mais video aulas de qualidades estão chegando .
Forte abraço
Wagner Gilberto e Matheus Felipe obrigado pelos comentários esta semana, estarei enviando mais uma vídeo aula relacionado ao jQuery para o Ricardo, segue o print da próxima video aula: http://img855.imageshack.us/img855/3605/paginacaocomjquery.jpg
Forte abraço
Com certeza vou gostar, ja tenho um que eu criei mas sempre é bom conhecer novos metodos e tecnicas e adicionar alguma coisinha pra incrementar, valeu pelas video aulas
ResponderVlw Roberto Pereira, otima video aula continua assim blz...
Responder
© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host
É proibida a reprodução total ou parcial de qualquer conteúdo deste site.
Como deveria proceder para incluir um menu com aba como o ensinado nessa aula, mas num tema em wordpress?